Congegni/sintonia
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

CC-6110 - Change header to be more responsive

Browse source
This commit is contained in:
Duncan Sommerville 2015-08-31 13:10:16 -04:00
parent d7d27d3c36
commit 5e024023eb
2 changed files with 28 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

6
airtime_mvc/public/css/masterpanel.css
View file

@ -3,10 +3,11 @@
/*---//////////////////// SOURCE INFO ////////////////////---*/ /*---//////////////////// SOURCE INFO ////////////////////---*/
.source-info-block { .source-info-block {
padding:0 0 0 2px; padding: 0;
background: url(images/masterpanel_spacer.png) no-repeat 0 0; background: url(images/masterpanel_spacer.png) no-repeat 0 0;
margin-right: 0; margin-right: 0;
} flex: 0 0 0;
}
.source-info-block h3, .on-air-block h3 { .source-info-block h3, .on-air-block h3 {
margin: 0 0 10px -1px; margin: 0 0 10px -1px;
padding:3px 0 2px 8px; padding:3px 0 2px 8px;
@ -226,6 +227,7 @@
.source-info-block + .on-air-block { .source-info-block + .on-air-block {
padding-right:2px; padding-right:2px;
flex: 0 100px;
} }
.source-info-block + .on-air-block .on-air-info, .source-info-block + .on-air-block .listen-control-button { .source-info-block + .on-air-block .on-air-info, .source-info-block + .on-air-block .listen-control-button {

72
airtime_mvc/public/css/styles.css
View file

@ -231,6 +231,14 @@ select {
} }
#master-panel { #master-panel {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
position:relative; position:relative;
height:100px; height:100px;
background:#3d3d3d url(images/masterpanel_bg.png) repeat-x 0 0; background:#3d3d3d url(images/masterpanel_bg.png) repeat-x 0 0;
@ -249,9 +257,9 @@ select {
} }
.source-info-block { .source-info-block {
height:100px; height:100px;
float:left; float:left;
min-width:170px; min-width:170px;
} }
.personal-block { .personal-block {
@ -283,13 +291,15 @@ select {
color:#ff5d1a; color:#ff5d1a;
} }
.now-playing-block { .now-playing-block {
width:35%; /*width:35%;*/
flex: 1 auto;
background: url(images/masterpanel_spacer.png) no-repeat 0 0; background: url(images/masterpanel_spacer.png) no-repeat 0 0;
margin-left: 152px; margin-left: 152px;
padding-left: 14px; padding-left: 14px;
} }
.show-block { .show-block {
width:30%; /*width:30%;*/
flex: 1 auto;
} }
.text-row { .text-row {
height:30px; height:30px;
@ -368,53 +378,21 @@ select {
background:url(images/masterpanel_spacer.png) no-repeat right 0; background:url(images/masterpanel_spacer.png) no-repeat right 0;
} }
.time-info-block { .time-info-block {
position: absolute; flex: 0 150px;
top: 0; /*position: absolute;*/
right: 0; /*top: 0;*/
/*right: 0;*/
} }
#navlist { #navlist {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
@media screen and (max-width: 1575px) {
.now-playing-block {
width: 30%;
}
.show-block {
width: 25%;
}
}
@media screen and (max-width: 1250px) { @media screen and (max-width: 1250px) {
.now-playing-block {
width: 50%;
}
.show-block { .show-block {
display: none; display: none;
} }
.personal-block.solo {
right: 10px !important;
}
} }
@media screen and (max-width: 1075px) { @media screen and (max-width: 875px) {
.now-playing-block {
width: 40%;
}
}
@media screen and (max-width: 900px) {
.now-playing-block {
width: 30%;
/*display: none;*/
}
/*#nav li.top {*/
/*display: -webkit-box;*/
/*display: -moz-box;*/
/*display: -ms-flexbox;*/
/*display: -webkit-flex;*/
/*display: flex;*/
/*width: 110px;*/
/*}*/
}
@media screen and (max-width: 775px) {
.now-playing-block { .now-playing-block {
display: none; display: none;
} }
@ -422,12 +400,10 @@ select {
margin-left: 152px; margin-left: 152px;
} }
} }
@media screen and (max-width: 520px) { @media screen and (max-width: 630px) {
.logo { #master-panel {
display: none; /*display: block;*/
} min-width: 630px;
.source-info-block {
margin-left: 0;
} }
} }
.time-info-block ul { .time-info-block ul {