From 102bbabc87b3568680bab2cf9722a5ccc49df6ff Mon Sep 17 00:00:00 2001
From: Hana <48352564+Piralein@users.noreply.github.com>
Date: Wed, 13 Jul 2022 00:01:35 +0300
Subject: [PATCH] Add mobile design with button to hide/show the teams list

---
 .../index/components/IndexDescription.js      | 15 ++++
 src/paths/index/components/IndexHeader.js     | 17 ++++-
 .../index/components/prs/PullRequestItem.js   | 76 +++++++++++--------
 .../index/components/prs/PullRequestList.js   | 56 +++++++++-----
 src/paths/index/components/teams/TeamList.js  | 72 +++++++++++++++---
 src/paths/index/entry.js                      | 34 +++++----
 src/shared/components/PageContent.js          |  7 ++
 7 files changed, 199 insertions(+), 78 deletions(-)

diff --git a/src/paths/index/components/IndexDescription.js b/src/paths/index/components/IndexDescription.js
index 25f94ba..1d5bc8a 100644
--- a/src/paths/index/components/IndexDescription.js
+++ b/src/paths/index/components/IndexDescription.js
@@ -44,6 +44,21 @@ export default class IndexDescription extends LitElement {
             border-top: 1px solid var(--g-background-extra-color);
             width: 30%;
           }
+
+          @media only screen and (max-width: 900px) {
+            :host .header-description {
+              padding: 0 8px;
+              flex-direction: column;
+            }
+
+            :host .header-description-column {
+              width: 100%;
+            }
+            :host .header-description-column.header-extra-links {
+              text-align: center;
+              padding-top: 12px;
+            }
+          }
         `;
     }
 
diff --git a/src/paths/index/components/IndexHeader.js b/src/paths/index/components/IndexHeader.js
index d244372..53555c5 100644
--- a/src/paths/index/components/IndexHeader.js
+++ b/src/paths/index/components/IndexHeader.js
@@ -35,6 +35,21 @@ export default class IndexHeader extends LitElement {
           :host .header-metadata a:hover {
             color: var(--link-font-color-hover);
           }
+
+          @media only screen and (max-width: 900px) {
+            :host .header {
+              flex-wrap: wrap;
+              text-align: center;
+            }
+            :host .header-title,
+            :host .header-metadata {
+              width: 100%;
+            }
+            :host .header-metadata {
+              padding-bottom: 12px;
+              text-align: center;
+            }
+          }
         `;
     }
 
@@ -78,7 +93,7 @@ export default class IndexHeader extends LitElement {
 
         return html`
             <div class="header">
-                <h1>
+                <h1 class="header-title">
                     Godot Team Reports
                 </h1>
                 <div class="header-metadata">
diff --git a/src/paths/index/components/prs/PullRequestItem.js b/src/paths/index/components/prs/PullRequestItem.js
index d203943..6de11a4 100644
--- a/src/paths/index/components/prs/PullRequestItem.js
+++ b/src/paths/index/components/prs/PullRequestItem.js
@@ -10,7 +10,7 @@ export default class PullRequestItem extends LitElement {
             --draft-font-color: #ffcc31;
             --draft-background-color: #9db3c0;
             --stats-background-color: #f9fafa;
-            
+
             --stat-temp0-color: #000000;
             --stat-temp1-color: #383824;
             --stat-temp2-color: #645b2c;
@@ -41,14 +41,14 @@ export default class PullRequestItem extends LitElement {
               --stat-temp9-color: #d3001c;
             }
           }
-          
+
           /** Component styling **/
           :host {
             border-bottom: 3px solid var(--pr-border-color);
             display: block;
             padding: 14px 12px 20px 12px;
           }
-          
+
           :host a {
             color: var(--link-font-color);
             text-decoration: none;
@@ -56,7 +56,7 @@ export default class PullRequestItem extends LitElement {
           :host a:hover {
             color: var(--link-font-color-hover);
           }
-          
+
           :host .pr-title {
             display: inline-block;
             font-size: 20px;
@@ -65,8 +65,9 @@ export default class PullRequestItem extends LitElement {
           }
           :host .pr-title-name {
             color: var(--g-font-color);
+            word-break: break-word;
           }
-          
+
           :host .pr-title-draft {
             background-color: var(--draft-background-color);
             border-radius: 6px 6px;
@@ -75,7 +76,7 @@ export default class PullRequestItem extends LitElement {
             padding: 1px 6px;
             vertical-align: bottom;
           }
-          
+
           :host .pr-meta {
             color: var(--dimmed-font-color);
             display: flex;
@@ -83,14 +84,14 @@ export default class PullRequestItem extends LitElement {
             justify-content: space-between;
             font-size: 13px;
           }
-          
+
           :host .pr-labels {
             display: flex;
             flex-flow: column wrap;
             padding: 4px 0;
             max-height: 60px;
           }
-          
+
           :host .pr-label {
             padding-right: 8px;
           }
@@ -101,43 +102,43 @@ export default class PullRequestItem extends LitElement {
             height: 8px;
           }
           :host .pr-label-name {
-            
+
           }
-          
+
           :host .pr-milestone-value {
             font-weight: 700;
           }
-          
+
           :host .pr-time {
-            
+
           }
           :host .pr-time-value {
             border-bottom: 1px dashed var(--g-font-color);
             cursor: help;
             font-weight: 700;
           }
-          
+
           :host .pr-author {
-            
+
           }
           :host .pr-author-value {
-            
+
           }
           :host .pr-author-value--hot:before {
             content: "★";
             color: var(--draft-font-color);
           }
-          
+
           :host .pr-links {
             font-size: 13px;
             margin-top: 8px;
           }
-          
+
           :host .pr-link {
             font-weight: 700;
             white-space: nowrap;
           }
-          
+
           :host .pr-stats {
             background-color: var(--stats-background-color);
             border-radius: 4px;
@@ -146,11 +147,11 @@ export default class PullRequestItem extends LitElement {
             padding: 10px 6px;
             margin-top: 12px;
           }
-          
+
           :host .pr-stat + .pr-stat {
             margin-left: 12px;
           }
-          
+
           :host .pr-stat--temp0 {
             color: var(--stat-temp0-color);
           }
@@ -186,7 +187,7 @@ export default class PullRequestItem extends LitElement {
             color: var(--stat-temp9-color);
             font-weight: 700;
           }
-          
+
           :host .pr-review {
             display: flex;
             justify-content: space-between;
@@ -197,7 +198,7 @@ export default class PullRequestItem extends LitElement {
           :host .pr-review-teams {
             max-width: 50%;
           }
-          
+
           :host .pr-review-team {
             color: var(--light-font-color);
             white-space: nowrap;
@@ -206,6 +207,19 @@ export default class PullRequestItem extends LitElement {
             content: "· ";
             white-space: break-spaces;
           }
+
+          @media only screen and (max-width: 900px) {
+            :host {
+              padding: 14px 0 20px 0;
+            }
+            :host .pr-meta {
+              flex-wrap: wrap;
+            }
+            :host .pr-labels {
+              width: 100%;
+              justify-content: space-between;
+            }
+          }
         `;
     }
 
@@ -264,7 +278,7 @@ export default class PullRequestItem extends LitElement {
                     ` : '')}
                     <span class="pr-title-id">#${this.id}</span> <span class="pr-title-name">${this.title}</span>
                 </a>
-                
+
                 <div class="pr-meta">
                     <div class="pr-labels">
                         ${this.labels.map((item) => {
@@ -285,7 +299,7 @@ export default class PullRequestItem extends LitElement {
                             `;
                         })}
                     </div>
-                    
+
                     <div class="pr-milestone">
                         <div>
                             <span>milestone: </span>
@@ -307,7 +321,7 @@ export default class PullRequestItem extends LitElement {
                             </span>
                         </div>
                     </div>
-                    
+
                     <div class="pr-timing">
                         <div class="pr-time">
                             <span>created: </span>
@@ -340,7 +354,7 @@ export default class PullRequestItem extends LitElement {
                         </div>
                     </div>
                 </div>
-                
+
                 ${(this.links.length > 0 ? html`
                     <div class="pr-links">
                         <span>linked issues: </span>
@@ -349,7 +363,7 @@ export default class PullRequestItem extends LitElement {
                             if (item.repo !== "godotengine/godot") {
                                 issueRef = item.repo + issueRef;
                             }
-                            
+
                             return html`
                                 ${(index > 0 ? html`
                                     <span> · </span>
@@ -366,7 +380,7 @@ export default class PullRequestItem extends LitElement {
                         })}
                     </div>
                 ` : '')}
-                
+
                 <div class="pr-stats">
                     <div
                         class="pr-stat"
@@ -391,7 +405,7 @@ export default class PullRequestItem extends LitElement {
                         </span>
                     </div>
                 </div>
-                
+
                 <div class="pr-review">
                     <div class="pr-review-teams">
                         ${(other_teams.length > 0) ? html`
@@ -410,7 +424,7 @@ export default class PullRequestItem extends LitElement {
                             target="_blank"
                         >
                             diff
-                        </a> | 
+                        </a> |
                         <a
                             href="${this.patch_url}"
                             target="_blank"
@@ -418,7 +432,7 @@ export default class PullRequestItem extends LitElement {
                             patch
                         </a>
                     </div>
-                    
+
                 </div>
             </div>
         `;
diff --git a/src/paths/index/components/prs/PullRequestList.js b/src/paths/index/components/prs/PullRequestList.js
index 20d4ff4..0fbbcad 100644
--- a/src/paths/index/components/prs/PullRequestList.js
+++ b/src/paths/index/components/prs/PullRequestList.js
@@ -17,17 +17,17 @@ export default class PullRequestList extends LitElement {
               --pulls-toolbar-color: #222c3d;
             }
           }
-          
+
           /** Component styling **/
           :host {
             flex-grow: 1;
           }
-          
+
           :host input[type=checkbox] {
             margin: 0;
             vertical-align: bottom;
           }
-          
+
           :host select {
             background: var(--pulls-background-color);
             border: 1px solid var(--pulls-background-color);
@@ -36,7 +36,7 @@ export default class PullRequestList extends LitElement {
             outline: none;
             min-width: 60px;
           }
-          
+
           :host .team-pulls {
             background-color: var(--pulls-background-color);
             border-radius: 0 4px 4px 0;
@@ -44,7 +44,7 @@ export default class PullRequestList extends LitElement {
             max-width: 760px;
             min-height: 200px;
           }
-          
+
           :host .team-pulls-toolbar {
             background: var(--pulls-toolbar-color);
             border-radius: 4px;
@@ -55,9 +55,9 @@ export default class PullRequestList extends LitElement {
             padding: 10px 14px;
             margin-bottom: 6px;
           }
-          
+
           :host .pulls-count {
-            
+
           }
           :host .pulls-count strong {
             font-size: 18px;
@@ -79,21 +79,21 @@ export default class PullRequestList extends LitElement {
           :host .pulls-filters-column + .pulls-filters-column {
             margin-left: 38px;
           }
-          
+
           :host .pulls-filter {
             display: flex;
             justify-content: space-between;
             align-items: center;
             margin: 1px 0;
           }
-          
+
           :host .pulls-sort {
             display: flex;
             justify-content: space-between;
             align-items: center;
             margin: 1px 0;
           }
-          
+
           :host .pulls-sort-action {
             color: var(--link-font-color);
             cursor: pointer;
@@ -101,13 +101,29 @@ export default class PullRequestList extends LitElement {
           :host .pulls-sort-action:hover {
             color: var(--link-font-color-hover);
           }
-          
+
           :host .pulls-sort-action--active,
           :host .pulls-sort-action--active:hover {
             color: var(--link-font-color-inactive);
             cursor: default;
             text-decoration: underline;
           }
+
+          @media only screen and (max-width: 900px) {
+            :host .team-pulls {
+              padding: 8px;
+            }
+            :host .pulls-count {
+              margin-bottom: 12px;
+            }
+            :host .team-pulls-toolbar {
+              flex-wrap: wrap;
+            }
+            :host .pulls-filters {
+              width: 100%;
+              justify-content: space-between;
+            }
+          }
         `;
     }
 
@@ -199,7 +215,7 @@ export default class PullRequestList extends LitElement {
                         ` : ''
                         }
                     </div>
-                    
+
                     <div class="pulls-filters">
                         <span class="pulls-filters-column">
                             <span class="pulls-filter">
@@ -210,15 +226,15 @@ export default class PullRequestList extends LitElement {
                                         @click="${this.onDraftsChecked}"
                                 />
                             </span>
-                            
+
                             <span class="pulls-filter">
                                 <span>milestone: </span>
                                 <select @change="${this.onMilestoneChanged}">
                                     <option value="">*</option>
                                     ${milestones.map((item) => {
                                         return html`
-                                            <option 
-                                                    value="${item}" 
+                                            <option
+                                                    value="${item}"
                                                     .selected="${this._filterMilestone === item}"
                                             >
                                                 ${item}
@@ -272,16 +288,16 @@ export default class PullRequestList extends LitElement {
                         </span>
                     </div>
                 </div>
-                
+
                 ${pulls.map((item) => {
                     const other_teams = [];
                     item.teams.forEach((teamId) => {
                         if (teamId === -1) {
                             return; // continue
                         }
-                        
+
                         if (
-                            this.selected_is_person 
+                            this.selected_is_person
                             || (!this.selected_is_person && teamId !== this.selected_group)
                         ) {
                             other_teams.push(
@@ -289,7 +305,7 @@ export default class PullRequestList extends LitElement {
                             );
                         }
                     });
-                    
+
                     let author = null;
                     if (typeof this.authors[item.authored_by] != "undefined") {
                         author = this.authors[item.authored_by];
@@ -313,7 +329,7 @@ export default class PullRequestList extends LitElement {
 
                             .diff_url="${item.diff_url}"
                             .patch_url="${item.patch_url}"
-                            
+
                             .teams="${other_teams}"
                         />
                     `;
diff --git a/src/paths/index/components/teams/TeamList.js b/src/paths/index/components/teams/TeamList.js
index 26ba437..3e2bd51 100644
--- a/src/paths/index/components/teams/TeamList.js
+++ b/src/paths/index/components/teams/TeamList.js
@@ -11,15 +11,17 @@ export default class TeamList extends LitElement {
             --teams-background-color: #fcfcfa;
             --teams-border-color: #515c6c;
             --section-active-border-color: #397adf;
+            --teams-mobile-color: #9bbaed;
           }
           @media (prefers-color-scheme: dark) {
             :host {
               --teams-background-color: #0d1117;
               --teams-border-color: #515c6c;
               --section-active-border-color: #397adf;
+              --teams-mobile-color: #222c3d;
             }
           }
-          
+
           /** Component styling **/
           :host {
           }
@@ -43,7 +45,7 @@ export default class TeamList extends LitElement {
           :host .team-list-title--active {
             border-bottom: 3px solid var(--section-active-border-color);
           }
-          
+
           :host .team-list-section {
             display: none;
           }
@@ -59,18 +61,52 @@ export default class TeamList extends LitElement {
             width: 4px;
             vertical-align: super;
           }
+          :host .team-mobile-container {
+            display: none;
+            padding: 0 12px 24px 12px;
+          }
+          :host .team-mobile-button {
+            width: 100%;
+            padding: 12px 0;
+            margin: 0;
+            border: none;
+            border-radius: 4px;
+            background: var(--teams-mobile-color);
+            text-align: center;
+            cursor: pointer;
+          }
+
+          @media only screen and (max-width: 900px) {
+            :host {
+              width: 100%
+            }
+            :host .team-list {
+              display: none;
+              width: 100% !important;
+            }
+            :host .team-mobile-container,
+            :host .team-list.team-list--active {
+              display: block !important;
+            }
+          }
         `;
     }
 
     @property({ type: Array }) teams = [];
     @property({ type: Array }) reviewers = [];
-    @property({ type: Number }) selected = -1;
+    @property({ type: Number }) selected = {};
     @property({ type: Boolean }) selected_is_person = false;
 
     constructor() {
         super();
 
         this._currentSection = "teams";
+        this._mobileActive = false;
+    }
+
+    onMobileClicked() {
+        this._mobileActive = !this._mobileActive;
+        this.requestUpdate();
     }
 
     onSwitcherClicked(switchTo, event) {
@@ -78,13 +114,15 @@ export default class TeamList extends LitElement {
         this.requestUpdate();
     }
 
-    onTabClicked(tabId, tabSlug, isPerson, event) {
+    onTabClicked(tab, isPerson, event) {
         this.dispatchEvent(greports.util.createEvent("tabclick", {
-            "tabId": tabId,
+            "tab": tab,
             "isPerson": isPerson,
         }));
 
-        greports.util.setHistoryHash(tabSlug);
+        greports.util.setHistoryHash(tab.slug);
+        this._mobileActive = false;
+        this.requestUpdate();
     }
 
     update(changedProperties) {
@@ -120,8 +158,18 @@ export default class TeamList extends LitElement {
             reviewersClassList.push("team-list-section--active");
         }
 
+        const containerClassList = ["team-list"];
+        if (this._mobileActive) {
+            containerClassList.push("team-list--active");
+        }
+
         return html`
-            <div class="team-list">
+            <div class="team-mobile-container">
+                <p class="team-mobile-button" @click="${this.onMobileClicked.bind(this)}">
+                    ${(this.selected_is_person) ? html `Reviewer : ` : html `Team : `} ${this.selected.name}
+                </p>
+            </div>
+            <div class="${containerClassList.join(" ")}">
                 <div class="team-list-switcher">
                     <h4
                         class="${teamsTitleClassList.join(" ")}"
@@ -146,8 +194,8 @@ export default class TeamList extends LitElement {
                                     .name="${item.name}"
                                     .avatar="${item.avatar}"
                                     .pull_count="${item.pull_count}"
-                                    ?active="${!this.selected_is_person && this.selected === item.id}"
-                                    @click="${this.onTabClicked.bind(this, item.id, item.slug, false)}"
+                                    ?active="${!this.selected_is_person && this.selected.id === item.id}"
+                                    @click="${this.onTabClicked.bind(this, item, false)}"
                                 />
                             `;
                         }) : html`
@@ -155,7 +203,7 @@ export default class TeamList extends LitElement {
                         `
                     }
                 </div>
-                
+
                 <div class="${reviewersClassList.join(" ")}">
                     ${(this.reviewers.length > 0) ?
                         this.reviewers.map((item) => {
@@ -165,8 +213,8 @@ export default class TeamList extends LitElement {
                                     .name="${item.name}"
                                     .avatar="${item.avatar}"
                                     .pull_count="${item.pull_count}"
-                                    ?active="${this.selected_is_person && this.selected === item.id}"
-                                    @click="${this.onTabClicked.bind(this, item.id, item.slug, true)}"
+                                    ?active="${this.selected_is_person && this.selected.id === item.id}"
+                                    @click="${this.onTabClicked.bind(this, item, true)}"
                                 />
                             `;
                         }) : html`
diff --git a/src/paths/index/entry.js b/src/paths/index/entry.js
index 46cb051..9a57941 100644
--- a/src/paths/index/entry.js
+++ b/src/paths/index/entry.js
@@ -18,15 +18,21 @@ export default class EntryComponent extends LitElement {
             :host {
             }
           }
-          
+
           /** Component styling **/
           :host {
           }
-          
+
           :host .teams {
             display: flex;
             padding: 24px 0;
           }
+
+          @media only screen and (max-width: 900px) {
+            :host .teams {
+              flex-wrap: wrap;
+            }
+          }
         `;
     }
 
@@ -41,7 +47,7 @@ export default class EntryComponent extends LitElement {
         this._orderedTeams = [];
         this._reviewers = {};
         this._orderedReviewers = [];
-        this._selectedGroup = -1;
+        this._selectedGroup = {};
         this._selectedIsPerson = false;
 
         this._authors = {};
@@ -100,7 +106,7 @@ export default class EntryComponent extends LitElement {
                 for (let i = 0; i < this._orderedTeams.length; i++) {
                     const team = this._orderedTeams[i];
                     if (team.slug === requested_slug) {
-                        this._selectedGroup = team.id;
+                        this._selectedGroup = team;
                         this._selectedIsPerson = false;
                         hasPresetGroup = true;
                         break;
@@ -111,7 +117,7 @@ export default class EntryComponent extends LitElement {
                     for (let i = 0; i < this._orderedReviewers.length; i++) {
                         const reviewer = this._orderedReviewers[i];
                         if (reviewer.slug === requested_slug) {
-                            this._selectedGroup = reviewer.id;
+                            this._selectedGroup = reviewer;
                             this._selectedIsPerson = true;
                             hasPresetGroup = true;
                             break;
@@ -123,10 +129,10 @@ export default class EntryComponent extends LitElement {
             // If no team/reviewer was passed in the URL, or that team/reviewer is not available, use the first team.
             if (!hasPresetGroup) {
                 if (this._orderedTeams.length) {
-                    this._selectedGroup = this._orderedTeams[0].id;
+                    this._selectedGroup = this._orderedTeams[0];
                     greports.util.setHistoryHash(this._orderedTeams[0].slug);
                 } else {
-                    this._selectedGroup = -1;
+                    this._selectedGroup = {};
                     greports.util.setHistoryHash("");
                 }
             }
@@ -136,7 +142,7 @@ export default class EntryComponent extends LitElement {
             this._orderedTeams = [];
             this._reviewers = {};
             this._orderedReviewers = [];
-            this._selectedGroup = -1;
+            this._selectedGroup = {};
             this._selectedIsPerson = false;
             this._authors = {};
             this._pulls = [];
@@ -147,7 +153,7 @@ export default class EntryComponent extends LitElement {
     }
 
     onTabClicked(event) {
-        this._selectedGroup = event.detail.tabId;
+        this._selectedGroup = event.detail.tab;
         this._selectedIsPerson = event.detail.isPerson;
         this.requestUpdate();
 
@@ -157,10 +163,10 @@ export default class EntryComponent extends LitElement {
     render(){
         let pulls = [];
         this._pulls.forEach((pull) => {
-            if (!this._selectedIsPerson && pull.teams.includes(this._selectedGroup)) {
+            if (!this._selectedIsPerson && pull.teams.includes(this._selectedGroup.id)) {
                 pulls.push(pull);
             }
-            if (this._selectedIsPerson && pull.reviewers.includes(this._selectedGroup)) {
+            if (this._selectedIsPerson && pull.reviewers.includes(this._selectedGroup.id)) {
                 pulls.push(pull);
             }
         });
@@ -169,7 +175,7 @@ export default class EntryComponent extends LitElement {
             <page-content>
                 <gr-index-entry .generated_at="${this._generatedAt}"></gr-index-entry>
                 <gr-index-description></gr-index-description>
-                
+
                 ${(this._isLoading ? html`
                     <h3>Loading...</h3>
                 ` : html`
@@ -181,11 +187,11 @@ export default class EntryComponent extends LitElement {
                             .selected_is_person="${this._selectedIsPerson}"
                             @tabclick="${this.onTabClicked}"
                         ></gr-team-list>
-                        
+
                         <gr-pull-list
                             .pulls="${pulls}"
                             .teams="${this._teams}"
-                            .selected_group="${this._selectedGroup}"
+                            .selected_group="${this._selectedGroup.id}"
                             .selected_is_person="${this._selectedIsPerson}"
                             .authors="${this._authors}"
                         ></gr-pull-list>
diff --git a/src/shared/components/PageContent.js b/src/shared/components/PageContent.js
index aae5e20..a41a63a 100644
--- a/src/shared/components/PageContent.js
+++ b/src/shared/components/PageContent.js
@@ -4,12 +4,19 @@ import { LitElement, html, css, customElement } from 'lit-element';
 export default class PageContent extends LitElement {
   static get styles() {
     return css`
+      /** Component styling **/
       :host {
         display: block;
         margin: 0 auto;
         padding: 0 12px;
         max-width: 1024px;
       }
+
+      @media only screen and (max-width: 900px) {
+        :host {
+          padding: 0;
+        }
+      }
     `;
   }