Skip to content

Commit

Permalink
more responsive design enhancements
Browse files Browse the repository at this point in the history
  • Loading branch information
@atutorlangs
atutorlangs committed Sep 26, 2013
1 parent 39689d6 commit 3e9e2ab
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 98 deletions.
23 changes: 17 additions & 6 deletions jscripts/mobile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,25 +23,36 @@ ATutor.mobile = ATutor.mobile || {};
// any click on the page closes the content menu but the link "content_link" itself
$(document).click(function (e) {
// hide content menu
if ($('#content').has("#" + e.target.id).length === 0) {
$('#content').slideUp(600);
/* if ($('#lrg_content').has("#" + e.target.id).length === 0) {
$('#lrg_content').slideUp(600);
$('#content_link').removeClass('content_link_tablet_highlight triangle-isosceles top right');
$('#content_link_phone').removeClass('topnavlist-link-highlight content-closed');
}

*/
// hide navigation menu
$('#navigation-column').slideUp(200);
$('#topnavlist-link').removeClass('topnavlist-link-highlight triangle-isosceles top topnavlist-link-highlight-background');
});

// open/close the content menu - tablets
$('#content_link').click(function (e) {
/* $('#content_link').click(function (e) {
$('#content').slideToggle(0);
$('#content_link').toggleClass('content_link_tablet_highlight').toggleClass('triangle-isosceles').toggleClass('top').toggleClass('right');
return false;
});

});*/
$('#content_link').click(function (e) {
$('#lrg_content').slideToggle(500);
$('#content_link').toggleClass('content_link_tablet_highlight').toggleClass('triangle-isosceles').toggleClass('top').toggleClass('right');

return false;
});
/* $('#content_link').click(function (e) {
$('#side-menu').slideToggle(500);
$('#content_link').toggleClass('content_link_tablet_highlight').toggleClass('triangle-isosceles').toggleClass('top').toggleClass('right');
return false;
});*/
// open/close content menu - smartphones
$('#content_link_phone').click(function (e) {
$('#content').slideToggle();
Expand Down
12 changes: 12 additions & 0 deletions themes/default/forms.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,4 +151,16 @@ select{
width: 50%;
text-align: right;
font-weight: bold;
}

@media screen and (max-device-width: 640px) {
input{
font-size:1.2em !important;
}
}
@media screen and (max-device-width: 640px) {
input{
font-size:1.2em !important;
}

}
6 changes: 6 additions & 0 deletions themes/default/include/header.tmpl.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,15 +307,21 @@
echo 'style="'.$style.'"';
endif; ?>>
<?php if (isset($this->course_id) && $this->course_id > 0 && $system_courses[$this->course_id]['side_menu']): ?>
<div id="sm_content">
<div id="content_link" role="navigation" aria-live="assertive" class="flc-screenNavigator-navbar ">
<a class="content_link_tablet content_link" href="javascript:void(0);"><?php echo _AT("content"); ?></a>
</div>
</div>
<div id="lrg_content">
<div id="leftcolumn" role="complementary">
<a id="menu"></a>
<div id="side-menu">
<?php require(AT_INCLUDE_PATH.'side_menu.inc.php'); ?>
</div>
</div>
</div>


<?php endif; ?>


Expand Down
197 changes: 105 additions & 92 deletions themes/default/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ body {
background-color: #ffffff;
color:#003333;
font-size:0.8em;


}
.page_wrapper{
Expand Down Expand Up @@ -3179,11 +3180,19 @@ div.input-form.remedialContent {
#sm_content{
display:none;
}
#lrg_content{
display:inline;
float:left;
clear:both;
}
#sm_content{
display:none;
}
#content_link{
display:none;
}
/******* Responsive elements *******/
@media screen and (max-width: 900px) {
@media screen and (max-width: 1600px) {
.current_box{
width:100%;
margin-left:0;
Expand All @@ -3198,7 +3207,9 @@ div.input-form.remedialContent {
display:none;
}
}
@media screen and (max-width: 700px) {

/* iPad screen width */
@media screen and (max-width: 1024px) {

.current_box{
width:100%;
Expand All @@ -3212,6 +3223,10 @@ div.input-form.remedialContent {
#contentcolumn{
padding-left:0;
padding-right:0;
float:left;
}
div#contentwrapper{
margin-top:1.5em;
}
.hidecol700{
visibility:hidden;
Expand Down Expand Up @@ -3250,12 +3265,12 @@ div.input-form.remedialContent {
width:100%
}
ul#topnavlist_sm li, ul#topnavlist_sm li a:hover, ul#topnavlist_sm li a:focus, ul#topnavlist_sm li a.active {
/*background-color: #B7C68B; */
color: #685642;
background-color: #F3F3F3;
background-image: linear-gradient(#FAFAFA, #EAEAEA);
text-decoration:none;
border:0;
/*background-color: #B7C68B; */
color: #685642;
background-color: #F3F3F3;
background-image: linear-gradient(#FAFAFA, #EAEAEA);
text-decoration:none;
border:0;

}
ul#topnavlist_sm li a.active{
Expand All @@ -3278,45 +3293,54 @@ div.input-form.remedialContent {
width:100%;
padding-top:1em;
}
#side-menu{
display:none;
}

h2.box{
display:none;
}
div.box, div.box ul{
display:none !important;
background-color:#ffffff;
border:none;
}

#leftcolumn {
padding:0;
padding-left:.5em;
padding-right:.5em;
height:auto;
float:left;
clear:both;
width:100%;
width:95%;
border:1px solid #E5E5E5;
border-radius:.5em;
margin-top:-.5em;
}
#leftcolumn br{
display:none;
border:1;
}
a.content_link{
float:left;
clear:both;
width:5em;
border-bottom: 3px solid #D26911;
padding: 1em .5em .3em .5em;
padding: .5em .3em .5em .5em;
background-color: #F3F3F3;
background-image: linear-gradient(#FAFAFA, #EAEAEA);
margin-bottom:.5em;
}
#menu_ContentNavigation{
display:inline !important;
width:22em;
background-color: white;
border:0;
margin-left:21em;
width:21em;
margin-bottom: 2em;
clear:both;
height:auto;
}
#menu_ContentNavigation br{
display:inline;
}
#menu_ContentNavigation a{
font-size:1.5em;
}
div.menuedit{
display:none;
}
Expand All @@ -3326,10 +3350,27 @@ div.input-form.remedialContent {
#content_link{
display:inline;
}
#lrg_content{
display:none;
}
#sm_content{
display:inline;
}
#shortcuts{
font-size:2em;
}
.img1616{
font-size:1.5em;
}
}
/********** for 480px or less *********/
@media screen and (max-device-width: 640px) {
body{
font-size:2.5em !important;
}
}
@media screen and (max-device-width: 640px) {

@media screen and (max-width: 480px) {
.current_box{
width:100%;
max-width:480px
Expand Down Expand Up @@ -3440,30 +3481,14 @@ div.input-form.remedialContent {
display:none;
float:left;
}
#side-menu{
width:100%
}

#leftcolumn {
display:none;
margin:0;
float:right;
clear:both;
width:100%
}
#sm_content{
margin-top:2em;
border:0;
display:inline;
}

a.content_link{
float:left;
clear:both;
width:5em;
border-bottom: 3px solid #D26911;
padding: .5em .5em .5em .5em;
padding: .5em .3em .5em .5em;
background-color: #F3F3F3;
background-image: linear-gradient(#FAFAFA, #EAEAEA);
margin-bottom:.5em;
}
#content{
display:none;
Expand All @@ -3481,65 +3506,53 @@ div.input-form.remedialContent {
.menuedit{
display:none;
}
div#shortcuts{
float:right;
clear:both;
}

h1#section-title{
margin-top:1em;
margin-top:1em;
font-size:1em;
}
.content-expand{
background-image:url("images/up.png");
background-position: 100% 100%;
background-repeat: no-repeat;
}

.content-closed{
background-image:url("images/down.png");
background-position: 100% 100%;
background-repeat: no-repeat;
}

div.box{

display:none;
}

#menu_ContentNavigation{
display:inline;
}

/*
.triangle-isosceles {
position: relative;
}
div.box{
display:none;
}

.triangle-isosceles:after {
border-style: solid;
content: "";
display: block;
position: absolute;
}

.triangle-isosceles.top:after {
border-color: black transparent;
border-width: 0pt 15px 15px;
bottom: auto;
left: auto;
left: 20%;
top: 95%;
z-index: 1000;
}
#leftcolumn br{
display:none;
border:1;
}

.triangle-isosceles.top.right:after {
border-color: black transparent;
border-width: 0pt 15px 15px;
bottom: auto;
left: auto;
right: 30%;
top: 98%;
z-index: 1000;
}
*/
#menu_ContentNavigation{
display:inline !important;
width:21em;
margin-bottom: 2em;
clear:both;
height:auto;
}
#menu_ContentNavigation br{
display:inline;
}
#menu_ContentNavigation a{
font-size:1.5em;
}
div#side-menu{
margin-top:-.5em;
}
div#contentwrapper{
margin-top:1.5em;
}
#breadcrumbs{
display:none
}
#lrg_content{
display:none;
}
#sm_content{
display:inline;
}
img {
max-width: 100%;
height: auto;
width: auto;
}
}

0 comments on commit 3e9e2ab

Please sign in to comment.