From 2fb988a7cb0effdcb34063bb5d6c7f976aae522f Mon Sep 17 00:00:00 2001 From: Duncan Sommerville Date: Mon, 16 Nov 2015 15:28:28 -0500 Subject: [PATCH] CSS fix for nav menu at small resolutions --- .../application/layouts/scripts/layout.phtml | 2 +- airtime_mvc/public/css/dashboard.css | 23 ++++- airtime_mvc/public/css/pro_dropdown_3.css | 7 +- airtime_mvc/public/css/styles.css | 86 +++++++++++++++++-- 4 files changed, 108 insertions(+), 10 deletions(-) diff --git a/airtime_mvc/application/layouts/scripts/layout.phtml b/airtime_mvc/application/layouts/scripts/layout.phtml index bbd3d1572..5c20ca575 100644 --- a/airtime_mvc/application/layouts/scripts/layout.phtml +++ b/airtime_mvc/application/layouts/scripts/layout.phtml @@ -102,7 +102,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= echo "var remainingDiskSpace = ".$disk->totalFreeSpace.";"; ?> -
+
diff --git a/airtime_mvc/public/css/dashboard.css b/airtime_mvc/public/css/dashboard.css index 66d8951f6..0faa5f602 100644 --- a/airtime_mvc/public/css/dashboard.css +++ b/airtime_mvc/public/css/dashboard.css @@ -293,6 +293,10 @@ thead th.ui-state-default:focus { left: 4px; z-index: 1; /* Display above the content wrapper */ + -webkit-flex: 1 100%; + -moz-flex: 1 100%; + -ms-flex: 1 100%; + -o-flex: 1 100%; flex: 1 100%; } @@ -447,6 +451,10 @@ li.ui-state-default { overflow: hidden; + -webkit-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + -o-flex: 1; flex: 1; } @@ -507,6 +515,10 @@ li.ui-state-default { .inner_editor_wrapper { overflow-x: hidden; width: 100%; + -webkit-flex: 1 0 auto; + -moz-flex: 1 0 auto; + -ms-flex: 1 0 auto; + -o-flex: 1 0 auto; flex: 1 0 auto; padding: 10px; -webkit-box-sizing: border-box; @@ -543,14 +555,17 @@ li.ui-state-default { } .spl-no-r-margin { - margin-right: 0px; + margin-right: 0; } .spl_sortable { height: 100%; overflow: auto; - flex: 1 100%; -webkit-flex: 1 100%; + -moz-flex: 1 100%; + -ms-flex: 1 100%; + -o-flex: 1 100%; + flex: 1 100%; margin: 4px 0; min-height: 0; @@ -585,6 +600,10 @@ li.ui-state-default { font-size: 20px; + -webkit-flex: 1 1 auto; + -moz-flex: 1 1 auto; + -ms-flex: 1 1 auto; + -o-flex: 1 1 auto; flex: 1 1 auto; /* Position the text label inside it centered*/ display: -webkit-box; diff --git a/airtime_mvc/public/css/pro_dropdown_3.css b/airtime_mvc/public/css/pro_dropdown_3.css index 4acca04ca..f0a276955 100644 --- a/airtime_mvc/public/css/pro_dropdown_3.css +++ b/airtime_mvc/public/css/pro_dropdown_3.css @@ -13,7 +13,7 @@ way to fit your requirements. /*padding:7px 0 0 6px;*/ margin:0; list-style:none; - height:28px; + /*height:28px;*/ background:#353535; position:relative; z-index:500; @@ -23,6 +23,11 @@ way to fit your requirements. -moz-box-shadow: 0 2px 5px rgba(0,0,0,.35); -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.35); box-shadow: 0 2px 5px rgba(0,0,0,.35);*/ + -webkit-flex: 1 0 auto; + -moz-flex: 1 0 auto; + -ms-flex: 1 0 auto; + -o-flex: 1 0 auto; + flex: 1 0 auto; } #nav li.top { /*margin:0 5px 0 0;*/ diff --git a/airtime_mvc/public/css/styles.css b/airtime_mvc/public/css/styles.css index c9652e9fe..f23959200 100644 --- a/airtime_mvc/public/css/styles.css +++ b/airtime_mvc/public/css/styles.css @@ -288,12 +288,20 @@ select { color:#ff5d1a; } .now-playing-block { + -webkit-flex: 1 0; + -moz-flex: 1 0; + -ms-flex: 1 0; + -o-flex: 1 0; flex: 1 0; background: url(images/masterpanel_spacer.png) no-repeat 0 0; margin-left: 152px; padding-left: 14px; } .show-block { + -webkit-flex: 1 0; + -moz-flex: 1 0; + -ms-flex: 1 0; + -o-flex: 1 0; flex: 1 0; } .text-row { @@ -373,6 +381,10 @@ select { background:url(images/masterpanel_spacer.png) no-repeat right 0; } .time-info-block { + -webkit-flex: 0 150px; + -moz-flex: 0 150px; + -ms-flex: 0 150px; + -o-flex: 0 150px; flex: 0 150px; /*position: absolute;*/ /*top: 0;*/ @@ -395,6 +407,10 @@ select { margin-left: 152px; } .time-info-block { + -webkit-flex: 1 150px; + -moz-flex: 1 150px; + -ms-flex: 1 150px; + -o-flex: 1 150px; flex: 1 150px; } } @@ -2455,11 +2471,19 @@ dd.radio-inline-list, .preferences dd.radio-inline-list, .stream-config dd.radio } .md-save { + -webkit-flex: 1 0 auto; + -moz-flex: 1 0 auto; + -ms-flex: 1 0 auto; + -o-flex: 1 0 auto; flex: 1 0 auto; margin-right: 4px; } .md-cancel { + -webkit-flex: 1 0 auto; + -moz-flex: 1 0 auto; + -ms-flex: 1 0 auto; + -o-flex: 1 0 auto; flex: 1 0 auto; } @@ -3525,6 +3549,15 @@ button.btn-icon-text > i.icon-white { /* Media type selector */ #media_type_nav { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: column; + flex-flow: column; + + position: absolute; top: 102px; bottom: 0; @@ -3535,6 +3568,10 @@ button.btn-icon-text > i.icon-white { width: 152px; + -webkit-flex: 1 auto; + -moz-flex: 1 auto; + -ms-flex: 1 auto; + -o-flex: 1 auto; flex: 1 auto; padding: 0; @@ -3548,6 +3585,8 @@ button.btn-icon-text > i.icon-white { z-index: 100; text-align: left; + + overflow: auto; } #media_type_nav .icon-white { @@ -3578,6 +3617,10 @@ button.btn-icon-text > i.icon-white { } #media_selector_wrapper { + -webkit-flex: 1 1 100%; + -moz-flex: 1 1 100%; + -ms-flex: 1 1 100%; + -o-flex: 1 1 100%; flex: 1 1 100%; display: -webkit-box; display: -moz-box; @@ -3594,6 +3637,10 @@ button.btn-icon-text > i.icon-white { .ui-dialog-content .media_type_selector { padding-left: 0; + -webkit-flex: 1 auto; + -moz-flex: 1 auto; + -ms-flex: 1 auto; + -o-flex: 1 auto; flex: 1 auto; } @@ -3689,6 +3736,10 @@ button.btn-icon-text > i.icon-white { left: 152px; width: 100%; + -webkit-flex: 0 100%; + -moz-flex: 0 100%; + -ms-flex: 0 100%; + -o-flex: 0 100%; flex: 0 100%; -webkit-box-sizing: border-box; @@ -3719,6 +3770,10 @@ button.btn-icon-text > i.icon-white { } #sub-menu-wrapper { + -webkit-flex: 0 140px; + -moz-flex: 0 140px; + -ms-flex: 0 140px; + -o-flex: 0 140px; flex: 0 140px; min-width: 140px; } @@ -3842,15 +3897,16 @@ hr { background-color: #242424; border: 1px solid #5b5b5b; color: #ccc; + -webkit-flex: 0 0 auto; + -moz-flex: 0 0 auto; + -ms-flex: 0 0 auto; + -o-flex: 0 0 auto; flex: 0 0 auto; } #disk_usage { border-radius: 1px; - /*position: fixed; - bottom: 5px; - left: 10px;*/ - width: 118px; + margin: 7px; font-size: 14px; text-align: center; padding: 5px 5px; @@ -3910,15 +3966,21 @@ li .ui-state-hover { -webkit-flex-flow: column; flex-flow: column; - flex: 1 1; -webkit-flex: 1 1; + -moz-flex: 1 1; + -ms-flex: 1 1; + -o-flex: 1 1; + flex: 1 1; min-width: 505px; } .outer-datatable-wrapper { position: relative; + -webkit-flex: 1 1; + -moz-flex: 1 1; + -ms-flex: 1 1; + -o-flex: 1 1; flex: 1; - -webkit-flex: 1; } #user_list_inner_wrapper { @@ -3973,6 +4035,10 @@ li .ui-state-hover { [id^="podcast_episodes"][id$="_wrapper"] { position: relative; + -webkit-flex: 1 100%; + -moz-flex: 1 100%; + -ms-flex: 1 100%; + -o-flex: 1 100%; flex: 1 100%; /*margin: 4px 0 0 !important;*/ min-height: 0; @@ -3998,6 +4064,10 @@ li .ui-state-hover { } .angular_wrapper > .station_podcast_wrapper { + -webkit-flex: 1 100%; + -moz-flex: 1 100%; + -ms-flex: 1 100%; + -o-flex: 1 100%; flex: 1 100%; } @@ -4124,6 +4194,10 @@ li .ui-state-hover { #whatsnew > button { margin-top: 10px; align-self: flex-end; + -webkit-flex: 1 0 auto; + -moz-flex: 1 0 auto; + -ms-flex: 1 0 auto; + -o-flex: 1 0 auto; flex: 1 0 auto; }