teams: collapsed view for small/medium screens

FirstLegoLeague · Jul 13, 2014 · 7dcdfcd · 7dcdfcd
1 parent 6d4d44c
commit 7dcdfcd
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 43 deletions.
diff --git a/src/css/elements.css b/src/css/elements.css
@@ -28,43 +28,6 @@ table {
 
 /* teams */
 @media screen {
-    .teams {
-        /*background-color: #333;*/
-    }
-    .team {
-        background-color: rgba(128,128,128,0.1);
-        color: dodgerblue;
-        padding: 12px 12px;
-        margin: 20px 0;
-    }
-    .team .number {
-        font-size: 16px;
-        line-height: 24px;
-    }
-    .team .name {
-        font-size: 28px;
-        line-height: 32px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    .team i {
-        float: right;
-        color: crimson;
-        font-size: 56px;
-    }
-
-    .mediumWindow .team .number {
-        font-size: 11px;
-        line-height: 18px;
-    }
-    .mediumWindow .team .name {
-        font-size: 20px;
-        line-height: 24px;
-    }
-    .mediumWindow .team i {
-        font-size: 38px;
-    }
 
     .active i {
         color: #319cff;
@@ -142,13 +105,20 @@ table {
     }
 
     .btn-enum {
-        /**font-weight: 500;**/
         text-rendering: optimizeLegibility;
     }
 
     .panel {
         padding: 1px;
     }
+
+    .smallLayoutShow {
+        display: initial;
+    }
+
+    .smallLayoutHide {
+        display: none !important;
+    }
 }
 
 /* medium layout */
@@ -189,6 +159,18 @@ table {
     .btn-enum {
         font-weight: 500;
     }
+
+    #teams .table-teams {
+        display: none;
+    }
+
+    .mediumLayoutShow {
+        display: initial;
+    }
+
+    .mediumLayoutHide {
+        display: none !important;
+    }
 }
 
 /* large layout */
@@ -224,4 +206,12 @@ table {
     .panel, #teams {
        padding: 10px;
     }
+
+    .largeLayoutShow {
+        display: initial;
+    }
+
+    .largeLayoutHide {
+        display: none !important;
+    }
 }
diff --git a/src/css/teams.css b/src/css/teams.css
@@ -1,7 +1,10 @@
 #teams {
-
+	overflow-y: auto;
 }
 
+#teams .scroller {
+	min-width: 1000px;
+}
 
 #teams .btn {
 	outline: 0;
@@ -12,6 +15,28 @@
 	text-align: center;
 }
 
-.table-teams .icon-trash {
+.team {
+    background-color: rgba(128,128,128,0.1);
+    color: dodgerblue;
+    padding: 12px 12px;
+    margin: 20px 0;
+}
+
+.team button {
+	float: right;
+}
+
+.team .extended {
+	margin-top: 5px;
+	padding-left: 10px;
+	font-size: 14px;
+}
+
+.team .title {
+	display: inline-block;
+	width: 130px;
+}
+
+.clickable {
 	cursor: pointer;
 }
diff --git a/src/views/scoresheet.html b/src/views/scoresheet.html
@@ -48,7 +48,7 @@ <h2>
 
             <section class="panel">
                 <h2>
-                    <button class="btn" ng-hide="team" ng-click="showTeams()">Select team</button>
+                    <button class="btn" ng-hide="team" ng-click="alert('todo: select team')">Select team</button>
                     <span ng-show="team">{{team.name}} ({{team.number}})</span>
                     <br>
                     <button ng-hide="team" class="btn">Select round</button>

diff --git a/src/views/teams.html b/src/views/teams.html
@@ -33,7 +33,7 @@ <h5>&nbsp;<i ng-show="saving" class="icon-save"></i></h5>
         </p>
     </form>
 
-    <table class="table table-bordered table-striped table-teams">
+    <table class="table table-bordered table-striped table-teams smallLayoutHide mediumLayoutHide">
         <thead>
             <tr>
                 <th ng-click="sort='team.number';rev=true">#</th>
@@ -62,9 +62,44 @@ <h5>&nbsp;<i ng-show="saving" class="icon-save"></i></h5>
             <td><i ng-show="team.translationNeeded===true" class="icon-ok"></i></td>
             <td>
                 <span ng-show="editMode">
-                    <i class="icon-trash" title="delete" fll-really-message="Sure to delete this team?" fll-really-click="removeTeam($index)"></i>
+                    <i class="icon-trash clickable" title="delete" fll-really-message="Sure to delete this team?" fll-really-click="removeTeam($index)"></i>
                 </span>
             </td>
         </tr>
     </table>
+    <div class="largeLayoutHide">
+        <div class="team clickable" ng-repeat="team in teams | index | orderBy:sort:ref" ng-click="isCollapsed = !isCollapsed">
+            ({{team.number}}) {{team.name}}, {{team.cityState}}
+            <button class="btn" ng-class="{active:isCollapsed}">+</button>
+            <div ng-class="{collapse:!isCollapsed}" class="extended">
+                <div>
+                    <span class="title">Country</span>
+                    {{team.country}}
+                </div>
+                <div>
+                    <span class="title">Affiliation</span>
+                    {{team.affiliation}}
+                </div>
+                <div>
+                    <span class="title">Coach 1</span>
+                    {{team.coach1}}
+                </div>
+                <div>
+                    <span class="title">Coach 2</span>
+                    {{team.coach2}}
+                </div>
+                <div>
+                    <span class="title">Judging group</span>
+                    {{team.judgingGroup}}
+                </div>
+                <div>
+                    <span class="title">Pit location</span>
+                    {{team.pitLocation}}
+                </div>
+                <div>
+                    <span class="title">Translation needed</span>
+                    <span ng-show="team.translationNeeded===true"><i class="icon-ok"></i></span>
+                </div>
+        </div>
+    </div>
 </div>