[spalenque] - #13221 * fix styles for mobile version of schedule

Author: santipalenque

summit/css/schedule-grid.css

@@ -26,6 +26,7 @@ i.collapse-nav {
 .schedule-title-wrapper {
     padding: 20px 0;
 }
+
 .col-main-title h1
 {
     margin: 0;
@@ -136,6 +137,28 @@ i.collapse-nav {
     margin-top: 10px;
 }
 
+@media (max-width: 767px) {
+    .col-time { font-size: 0.9em !important; }
+    .col-time .icon-clock { font-size: 1em !important; }
+    .col-location { font-size: 0.9em !important; }
+    .col-location .icon-map { font-size: 1em !important; }
+    .event-title { font-size: 1.2em !important;}
+    .track { font-size: 0.9em !important;}
+    .track a { font-size: 0.9em !important;}
+    .event-type-col { font-size: 0.8em !important;}
+}
+
+@media (min-width: 768px) and (max-width: 1200px)  {
+    .col-time { font-size: 0.9em !important; }
+    .col-time .icon-clock { font-size: 1em !important; }
+    .col-location { font-size: 0.9em !important; }
+    .col-location .icon-map { font-size: 1em !important; }
+    .event-title { font-size: 1.2em !important;}
+    .track { font-size: 0.9em !important;}
+    .track a { font-size: 0.9em !important;}
+    .event-type-col { font-size: 0.8em !important;}
+}
+
 .event-results .col-level-title {
     height: 10px;
 }
@@ -251,7 +274,37 @@ i.collapse-nav {
 }
 
 .view-select-container {
-    padding: 1.1%;
+    padding: 10px;
+}
+
+.view-select-container #view-select {
+    background-color: #edf2f7;
+    margin-left: 10px;
+    border-radius: 5px;
+    height: 30px;
+    width: 55px;
+    cursor: pointer;
+
+}
+
+@media (max-width: 767px) {
+    .view-select-container {
+        width: 50%;
+        float: left;
+    }
+    .view-days-container {
+        width: 50%;
+        float: left;
+        padding-right: 5px;
+    }
+    .view-days-container .navbar-toggle {
+        margin-right: 5px;
+        padding: 9px 0;
+    }
+    .navbar-brand-month {
+        padding: 15px 0 0 0;
+        margin: 0;
+    }
 }
 
 .track-nav-container {
@@ -489,11 +542,9 @@ a.navbar-brand {
     font-weight: bold;
 }
 
-@media all and (max-width: 700px) {
-    .col-filter-title
-    {
-        padding-left: 3em;
-    }
+@media all and (max-width: 767px) {
+    .col-filter-title span { display: none; }
+    .col-filter-title #clear-filters { font-size: 10px; }
 }
 
 .all-events-filter-row
@@ -595,16 +646,43 @@ a.navbar-brand {
     float: right;
 }
 
-@media (max-width: 600px) {
-    .view-all-schedule {
+@media (max-width: 767px) {
+    .all-events-filter-row .filter-button-col-left {
+        position: relative;
+        width: 50%;
+        margin: 10px 0 0 0;
+        padding: 0 10px 0 0;
         float: left;
-        margin-top: 10px;
     }
+    .all-events-filter-row .filter-button-col-right {
+        position: relative;
+        width: 50%;
+        margin: 10px 0 0 0;
+        padding: 0 0 0 10px;
+        float: left;
+    }
+    .all-events-filter-row .filter-button-col-left button, .all-events-filter-row .filter-button-col-right button  {
+        width: 100%;
+    }
+}
 
-    .col-switch-schedule {
+@media (min-width: 768px) and (max-width: 1200px)  {
+    .all-events-filter-row .filter-button-col-left {
+        position: relative;
+        width: 25%;
+        margin: 10px 0 0 0;
+        padding: 0 10px 0 0;
         float: left;
-        margin-right: 20px;
-        margin-top: 10px;
+    }
+    .all-events-filter-row .filter-button-col-right {
+        position: relative;
+        width: 25%;
+        margin: 10px 0 0 0;
+        padding: 0 10px 0 0;
+        float: left;
+    }
+    .all-events-filter-row .filter-button-col-left button, .all-events-filter-row .filter-button-col-right button  {
+        width: 100%;
     }
 }
 
@@ -642,24 +720,24 @@ form.all-events-search-form .all-events-search-wrapper i {
 
 .login-container, .logout-container {
     position: relative;
-    top: 116px;
+    top: 117px;
     right: 0px;
     text-align: right;
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 768px) and (max-width: 1200px)  {
     .login-container, .logout-container {
         position: relative;
-        top: 165px;
+        top: 120px;
         right: 0px;
         text-align: right;
     }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 767px) {
     .login-container, .logout-container {
         position: relative;
-        top: -12px;
+        top: -160px;
         right: 0px;
         text-align: right;
     }
@@ -873,7 +951,6 @@ h2.subtitle {
 
 .col-log-in{
     margin:0;
-    padding: 0;
     padding-top: 1%;
 }
 
@@ -945,7 +1022,7 @@ span.caret-event-actions:before {
 }
 
 .dropdown-menu-event-actions{
-    left: -8em !important;
+    left: -10em !important;
     top: 40%;
 }
 
@@ -962,10 +1039,19 @@ span.caret-event-actions:before {
     vertical-align: middle;
     position: absolute;
     top: 45%;
+    font-size: 25px;
 }
 
-.event-state .event-status{
-    font-size: 25px;
+@media (max-width: 768px) {
+    .event-state .event-status {
+        left: 0;
+    }
+}
+
+@media (min-width: 768px) and (max-width: 1200px) {
+    .event-state .event-status {
+        left: 50%;
+    }
 }
 
 .row-eq-height {
@@ -1003,7 +1089,8 @@ span.caret-event-actions {
     background-size:contain;
     background-repeat:no-repeat;
     display:inline-block;
-    width:100px;height:70px;
+    width:100px;
+    height:70px;
     -webkit-transition: all 100ms ease-in;
     -moz-transition: all 100ms ease-in;
     transition: all 100ms ease-in;
@@ -1012,6 +1099,13 @@ span.caret-event-actions {
     filter: brightness(1.8) grayscale(1) opacity(.7);
 }
 
+@media (max-width: 768px) {
+    .cal_image {
+        width: 80px;
+        height: 50px;
+    }
+}
+
 .cal_image:hover{
     -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
     -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);

summit/templates/Layout/SummitAppSchedPage_sync_calendar.ss

@@ -1,15 +1,15 @@
 <div class="container-fluid">
     <div class="container section1">
         <div class="row schedule-title-wrapper">
-            <div class="col-sm-10 col-main-title">
+            <div class="col-md-10 col-xs-12 col-main-title">
                 <h1 style="text-align:left;">Synchronize Calendar</h1>
                 <% if $goback %>
                 <div class="go-back">
                     <a href="#" onclick="window.history.back(); return false;"><< Go back </a>
                 </div>
                 <% end_if %>
             </div>
-            <div class="col-sm-2 col-log-in">
+            <div class="col-md-2 col-xs-12 col-log-in">
                 <a class="action btn btn-default" id="login-button" href="/Security/logout/?BackURL={$Top.Link}"><i class="fa fa-sign-out" aria-hidden="true"></i>Log Out</a>
              </div>
         </div>

summit/ui/source/js/components/schedule/event-list/event/content.js

@@ -29,15 +29,15 @@ const EventContent = ({
     return (
     <div className="event-content col-sm-10 col-xs-10">
         <div className="row row_location">
-            <div className="col-sm-3 col-time">
+            <div className="col-sm-4 col-md-3 col-time">
                 <i className="fa fa-clock-o icon-clock" />
                 <span className="event-date">{event.date_nice}</span>
                 ,&nbsp;
                 <span className="start-time">{event.start_time}</span>
                 &nbsp;-&nbsp;
                 <span className="end-time">{event.end_time}</span>
             </div>
-            <div className="col-sm-8 col-location">
+            <div className="col-sm-8 col-md-9 col-location">
                 {summit.should_show_venues &&
                 <div>
                     <i className="fa fa-map-marker icon-map"></i>&nbsp;

summit/ui/source/js/components/schedule/main-filter/actions.js

@@ -12,6 +12,8 @@ const MainFilterActions = ({
 }) => {
     const { summit: { current_user }, base_url } = ScheduleProps;
     const { values, expanded, calSync }          = filters;
+    let full_view_url = (values.going) ? `${base_url}mine/` : `${base_url}full/`;
+
     return (
     <div className="row all-events-filter-row">
         <div className="col-md-4 col-xs-12 all-events-filter-link">
@@ -31,50 +33,40 @@ const MainFilterActions = ({
             </div>
         </div>
         <div className="col-md-7 col-xs-12">
-            <div className="col-view-all-schedule">
-                {values.going &&
-                <form action={`${base_url}mine/`} method="POST">
-                    <input type="hidden" name="goback" value="1" />
-                    <button type="submit" className="btn btn-default view-all-schedule">
-                        View&nbsp;/&nbsp;Print&nbsp;My&nbsp;Schedule
-                    </button>
-                </form>
-                }
-                {!values.going &&
-                <form action={`${base_url}full/`} method="POST">
+            <div className="col-view-all-schedule filter-button-col-left">
+                <form action={full_view_url} method="POST">
                     <input type="hidden" name="goback" value="1" />
                     <button type="submit" className="btn btn-default view-all-schedule">
-                        View&nbsp;/&nbsp;Print&nbsp;Full&nbsp;Schedule
+                    Full&nbsp;/&nbsp;Print&nbsp;View
                     </button>
                 </form>
-                }
-            </div>
-            <div className="col-switch-schedule">
-                {current_user && ! values.favorites &&
-                <button type="button" className="btn btn-primary pull-right switch_schedule"
-                onClick={() => setFilters({ going: ! values.going })}>
-                    <span className="glyphicon glyphicon-calendar"></span>
-                    &nbsp;
-                    <span className="content">
-                        {values.going ? 'Full Schedule' : 'My Schedule' }
-                    </span>
-                </button>
-                }
-            </div>
-            <div className="col-switch-watchlist">
-                {current_user && ! values.going &&
-                <button type="button" className="btn btn-primary pull-right switch_favorites"
-                onClick={() => setFilters({ favorites: ! values.favorites })}>
-                    <span className="glyphicon glyphicon-bookmark"></span>
-                    &nbsp;
-                    <span className="content">
-                        {values.favorites ? 'Full Schedule' : 'Watch Later'}
-                    </span>
-                </button>
-                }
             </div>
-                <div className="col-toggle-sync">
-                {summit.should_show_venues && current_user &&
+            {current_user && ! values.favorites &&
+                <div className="col-switch-schedule filter-button-col-right">
+                    <button type="button" className="btn btn-primary pull-right switch_schedule"
+                    onClick={() => setFilters({ going: ! values.going })}>
+                        <span className="glyphicon glyphicon-calendar"></span>
+                        &nbsp;
+                        <span className="content">
+                            {values.going ? 'Full Schedule' : 'My Schedule' }
+                        </span>
+                    </button>
+                </div>
+            }
+            {current_user && ! values.going &&
+                <div className="col-switch-watchlist filter-button-col-left">
+                    <button type="button" className="btn btn-primary pull-right switch_favorites"
+                    onClick={() => setFilters({ favorites: ! values.favorites })}>
+                        <span className="glyphicon glyphicon-bookmark"></span>
+                        &nbsp;
+                        <span className="content">
+                            {values.favorites ? 'Full Schedule' : 'Watch Later'}
+                        </span>
+                    </button>
+                </div>
+            }
+            {summit.should_show_venues && current_user &&
+                <div className="col-toggle-sync filter-button-col-right">
                     <ToggleButton
                         onClick={ () => toggleCalSyncClick() }
                         className="toggle_sync"
@@ -83,8 +75,8 @@ const MainFilterActions = ({
                         offstyle="danger"
                         active={calSync}
                     />
+                </div>
             }
-            </div>
         </div>
     </div>
 )}

summit/ui/source/js/components/schedule/main-view.js

@@ -12,7 +12,7 @@ class MainView extends Component {
         const { view } = this.props
         return (
         <div className="row navbar-container">
-            <div className="col-md-3 view-select-container">
+            <div className="col-md-3 col-sm-3 view-select-container">
                 View by
                 <select id="view-select" value={view.type}
                 onChange={e => this.changeView(e, e.target.value)}>
@@ -21,7 +21,7 @@ class MainView extends Component {
                     <option value={VIEW_LEVELS}>Level</option>
                 </select>
             </div>
-            <div className="col-md-9">
+            <div className="col-md-9 col-sm-9 view-days-container">
             {view.type === VIEW_DAYS   && this.renderDays()}
             {view.type === VIEW_TRACKS && this.renderTracks()}
             {view.type === VIEW_LEVELS && this.renderLevels()}

themes/openstack/css/navigation_menu.css

@@ -35,9 +35,6 @@ a.navbar-brand {
         width: 135px;
     }
 }
-@media (max-width: 767px), only screen and (max-device-width: 1024px) {
-    a.navbar-brand {
-        margin-left: 15px; } }
 
 .navbar-default {
     border-radius: 0px;