Polishing up the font and element sizes for phones and tablets.
This commit is contained in:
parent
81a2ce5827
commit
21f1bd6a60
@ -134,6 +134,7 @@ Template.main.rendered = ->
|
||||
|
||||
Template.main.events
|
||||
'click .shield': (event) ->
|
||||
$(".tooltip").hide()
|
||||
toggleShield()
|
||||
closeMenus()
|
||||
|
||||
|
@ -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); }
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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()
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user