Polishing up the font and element sizes for phones and tablets.

This commit is contained in:
Maxim Khlobystov 2015-08-21 10:59:09 -04:00
parent 81a2ce5827
commit 21f1bd6a60
6 changed files with 79 additions and 48 deletions

View File

@ -134,6 +134,7 @@ Template.main.rendered = ->
Template.main.events
'click .shield': (event) ->
$(".tooltip").hide()
toggleShield()
closeMenus()

View File

@ -85,8 +85,8 @@
}
}
}
#saveSettings {
border-radius: 3px;
#saveSettings {
border-radius: 3px;
padding: 5px 10px 5px 10px;
@media @desktop-portrait, @landscape {
@ -99,3 +99,67 @@
font-size: 250%;
}
}
#logoutModal {
margin-top: 0px;
margin-right: 0px;
top: 5% !important;
right: 5%;
position: fixed;
text-align: center;
@media @desktop-landscape {
width: 20%;
}
@media @phone-landscape {
width: 50%;
height: 50%;
min-height: 0; // overrides the value from Foundation
left: 45%;
}
@media @tablet-landscape {
width: 30%;
height: 40%;
p {
font-size: 120%;
}
}
@media @desktop-portrait {
width: 40%;
}
@media @phone-portrait-with-keyboard, @phone-portrait {
width: 90%;
height: 40%;
min-height: 0; // overrides the value from Foundation
left: 5%;
p {
font-size: 150%;
}
}
@media @tablet-portrait-with-keyboard, @tablet-portrait {
width: 90%;
height: 20%;
min-height: 0; // overrides the value from Foundation
left: 5%;
p {
font-size: 150%;
}
}
.logoutButton {
padding: 0px;
@media @desktop-portrait, @landscape {
width: 50px;
height: 30px;
}
@media @mobile-portrait-with-keyboard, @mobile-portrait {
width: 20%;
font-size: 150%;
}
background-color: rgb(229, 229, 229);
color: rgb(121, 121, 121);
font-weight: bold;
border-radius: 10px;
margin-left: 5px;
margin-right: 5px;
}
#yes { border: 2px solid rgb(71, 164, 255); }
}

View File

@ -302,14 +302,15 @@ body {
}
@media @phone-portrait, @phone-portrait-with-keyboard {
font-size: 18px;
padding-top: 8px;
}
@media @tablet-portrait, @tablet-portrait-with-keyboard {
font-size: 18px;
font-size: 20px;
padding-top: 7px;
}
@media @mobile-portrait, @mobile-portrait-with-keyboard {
.linear-gradient(rgb(72,76,85), rgb(65,68,77));
padding-top: 8px;
color: white;
height: 50px;
}
@ -629,45 +630,6 @@ body {
}
}
#logoutModal {
margin-top: 0px;
margin-right: 0px;
top: 5% !important;
right: 5%;
position: fixed;
text-align: center;
@media @landscape {
width: 20%;
}
@media @desktop-portrait {
width: 40%;
}
@media @mobile-portrait-with-keyboard, @mobile-portrait {
width: 90%;
p {
font-size: 250%;
}
}
.logoutButton {
padding: 0px;
@media @desktop-portrait, @landscape {
width: 50px;
height: 30px;
}
@media @mobile-portrait-with-keyboard, @mobile-portrait {
width: 20%;
font-size: 200%;
}
background-color: rgb(229, 229, 229);
color: rgb(121, 121, 121);
font-weight: bold;
border-radius: 10px;
margin-left: 5px;
margin-right: 5px;
}
#yes { border: 2px solid rgb(71, 164, 255); }
}
.top-bar {
line-height: 0;
}

View File

@ -45,8 +45,11 @@
height: 27px;
font-size: 4.5mm;
}
@media @mobile-portrait, @mobile-portrait-with-keyboard {
font-size: 4vw;
@media @phone-portrait, @phone-portrait-with-keyboard {
font-size: 15px;
}
@media @tablet-portrait, @tablet-portrait-with-keyboard {
font-size: 17px;
}
}

View File

@ -5,7 +5,8 @@ Template.settingsModal.helpers
Template.logoutModal.events
"click #yes": -> userLogout(getInSession("meetingId"), getInSession("userId"))
"click #no": -> $("#logoutModal").foundation('reveal', 'close');
"click #no": -> $("#logoutModal").foundation('reveal', 'close')
"click .logoutButton": -> $(".tooltip").hide()
Template.settingsAudio.events
"click #exitAudio": -> exitVoiceCall()

View File

@ -52,6 +52,6 @@
<template name="logoutModal">
<p>Are you sure you want to logout?</p>
{{> makeButton id="yes" btn_class="logoutButton" rel="tooltip" title="Logout" label="Yes"}}
{{> makeButton id="no" btn_class="logoutButton" rel="tooltip" title="Logout" label="No"}}
{{> makeButton id="yes" btn_class="logoutButton" label="Yes"}}
{{> makeButton id="no" btn_class="logoutButton" label="No"}}
</template>