Author: ralftgehrig
Date: Tue Feb 14 21:42:07 2012
New Revision: 10894
Log:
CSS is now adapting to browser width, making it work across mobile phones and
tablets.
Modified:
trunk/plugins/qtArchivesCanadaPlugin/css/bootstrap/bootstrap.less
trunk/plugins/qtArchivesCanadaPlugin/css/bootstrap/responsive.less
trunk/plugins/qtArchivesCanadaPlugin/css/less/_content.less
trunk/plugins/qtArchivesCanadaPlugin/css/less/_header.less
trunk/plugins/qtArchivesCanadaPlugin/css/less/_scaffolding.less
trunk/plugins/qtArchivesCanadaPlugin/css/main.less
trunk/plugins/qtArchivesCanadaPlugin/images/ArchivesCanadaLogo.png
trunk/plugins/qtArchivesCanadaPlugin/templates/_header.php
trunk/plugins/qtArchivesCanadaPlugin/templates/layout.php
Modified: trunk/plugins/qtArchivesCanadaPlugin/css/bootstrap/bootstrap.less
==============================================================================
--- trunk/plugins/qtArchivesCanadaPlugin/css/bootstrap/bootstrap.less Tue Feb
14 17:14:24 2012 (r10893)
+++ trunk/plugins/qtArchivesCanadaPlugin/css/bootstrap/bootstrap.less Tue Feb
14 21:42:07 2012 (r10894)
@@ -19,6 +19,7 @@
@import "scaffolding.less";
@import "grid.less";
@import "layouts.less";
+@import "responsive.less";
// Base CSS
@import "type.less";
@@ -58,5 +59,8 @@
@import "carousel.less";
@import "hero-unit.less";
+// Responsive Design for mobile and devices
+@import "responsive.less";
+
// Utility classes
@import "utilities.less"; // Has to be last to override when necessary
Modified: trunk/plugins/qtArchivesCanadaPlugin/css/bootstrap/responsive.less
==============================================================================
--- trunk/plugins/qtArchivesCanadaPlugin/css/bootstrap/responsive.less Tue Feb
14 17:14:24 2012 (r10893)
+++ trunk/plugins/qtArchivesCanadaPlugin/css/bootstrap/responsive.less Tue Feb
14 21:42:07 2012 (r10894)
@@ -63,7 +63,7 @@
-ms-box-sizing: border-box; /* IE8 */
box-sizing: border-box; /* CSS3 spec*/
}
- // But don't let it screw up prepend/append inputs
+ // But dont let it screw up prepend/append inputs
.input-prepend input[class*="span"],
.input-append input[class*="span"] {
width: auto;
Modified: trunk/plugins/qtArchivesCanadaPlugin/css/less/_content.less
==============================================================================
--- trunk/plugins/qtArchivesCanadaPlugin/css/less/_content.less Tue Feb 14
17:14:24 2012 (r10893)
+++ trunk/plugins/qtArchivesCanadaPlugin/css/less/_content.less Tue Feb 14
21:42:07 2012 (r10894)
@@ -203,4 +203,31 @@
}
-#content .search { .hide; }
\ No newline at end of file
+#content .search { .hide; }
+
+
+@media (max-width: 768px) {
+ #content .section {
+ .section {
+
+
+ h2 {
+ font-size: 16px;
+ }
+
+ .field h3 {
+ float:none;
+ width:100%;
+ margin:5px 0 0 5px;
+ padding: 0;
+ text-align: left;
+ line-height: 14px;
+ }
+
+ .field div {
+ margin-left:5px;
+ padding:0;
+ }
+ }
+ }
+}
\ No newline at end of file
Modified: trunk/plugins/qtArchivesCanadaPlugin/css/less/_header.less
==============================================================================
--- trunk/plugins/qtArchivesCanadaPlugin/css/less/_header.less Tue Feb 14
17:14:24 2012 (r10893)
+++ trunk/plugins/qtArchivesCanadaPlugin/css/less/_header.less Tue Feb 14
21:42:07 2012 (r10894)
@@ -5,40 +5,37 @@
top: 0;
left: 0;
right: 0;
- overflow: visible;
border-bottom: 1px solid @blue;
#gradient > .vertical-three-colors(@white, @white, 70%, lighten(@grayLight,
10%));
@shadow: 0 3px 3px rgba(0,0,0,.25);
.box-shadow(@shadow);
+
+
.container {
margin: 0 auto 0 auto;
> #first-level {
height: 38px;
- #update-check { .hide; }
+ #update-check { .hide; }
}
> #second-level {
- height: 62px;
+ height: 48px;
#logo-and-name {
- background:url(../../images/ArchivesCanadaLogo.png) no-repeat;
- height:100%;
-
- #logo {
-
- img { display:none; }
-
- }
-
h1 {
- display:none;
+ a {
+ font-size:16px;
+
+ img {
+ float:left;
+ margin-right:5px;
+ }
+ }
}
-
-
}
.search {
@@ -48,18 +45,16 @@
input[name="query"] {
background-color: @white;
- font-size:19px;
+ font-size:19px;
width: 95%;
- padding: 6px 9px;
+ padding: 6px 9px 2px 9px;
color: @grayLight;
border:none;
- outline: 0;
+ outline: 0;
border-bottom: 2px solid @grayLight;
- //@shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px
rgba(255,255,255,.25);
- .box-shadow(none);
- //.transition(none);
- display: block;
- .border-radius(0);
+ .box-shadow(none);
+ display: block;
+ .border-radius(0);
&:-moz-placeholder {
@@ -83,7 +78,7 @@
&:focus,
&.focused {
- outline: none;
+ outline: none;
border-bottom: 2px solid @grayDark;
color:@grayDark;
@@ -92,30 +87,7 @@
}
input[type=submit] {
- display:none;
- margin: 0px 0 0 10px;
- padding: 0 20px;
- float: left;
- border: 1px solid @grayDark;
- /* #gradient > .horizontal(#00b500, #00b500); */
- background-color: #008800;
- background-image:
url(../../../sfCaribouPlugin/images/search.png);
- background-repeat: no-repeat;
- background-position: 50% 50%;
- .border-radius(4px);
- font-size: 0px;
- height: 30px;
- width: 26px;
-
- &:hover {
-
- #gradient > .horizontal(darken(#4d90fe, 5%), darken(#4787ed,
5%));
- background-image:
url(../../../sfCaribouPlugin/images/search.png);
- background-repeat: no-repeat;
- background-position: 50% 50%;
-
- }
-
+ .hide;
}
}
@@ -135,6 +107,7 @@
display: block;
margin-left:0;
+ z-index: 50000;
&#options-menu {
@@ -211,8 +184,9 @@
a.menu,
a:hover {
+ z-index: 50000;
background-color: @grayDark;
- color:@orange;
+ color:@blue;
}
@@ -230,7 +204,7 @@
float: left;
display: none;
position: absolute;
- z-index: 1;
+ z-index: 50000;
top: 30px;
min-width: 160px;
max-width: 220px;
@@ -286,14 +260,13 @@
}
#searchrealm {
- display:none;
position: fixed;
top: 71px;
left: 51%;
width:455px;
padding:5px;
z-index: @zindexPopover;
- .show;
+ .hide;
.box-shadow(0 1px 3px rgba(0,0,0,.25));
#gradient > .vertical-three-colors(@white, @white, 70%, lighten(@grayLight,
10%));
@@ -317,4 +290,59 @@
font-size:15px;
}
}
+}
+
+@media (max-width: 768px) {
+
+ #header {
+ position: static;
+ height: 110px;
+
+ #first-level {
+ height:auto;
+
+ #adminmenu {
+ .hidden;
+ }
+
+ #options-menu {
+ margin:0;
+ }
+ }
+
+ #second-level {
+
+ #logo-and-name {
+ width: 100%;
+ float: none;
+ margin:0 0 5px 0;
+ display: block;
+
+ h1 a {
+ display: block;
+
+ img {
+ float:none !important;
+ }
+ }
+ }
+
+ .search {
+ width: 100%;
+ float: none;
+ margin:10px 0 0 0;
+ display: block;
+
+ form {
+ width: 100%;
+
+ input[name="query"] {
+ width: 100%;
+ }
+ }
+
+ }
+
+ }
+ }
}
\ No newline at end of file
Modified: trunk/plugins/qtArchivesCanadaPlugin/css/less/_scaffolding.less
==============================================================================
--- trunk/plugins/qtArchivesCanadaPlugin/css/less/_scaffolding.less Tue Feb
14 17:14:24 2012 (r10893)
+++ trunk/plugins/qtArchivesCanadaPlugin/css/less/_scaffolding.less Tue Feb
14 21:42:07 2012 (r10894)
@@ -51,3 +51,15 @@
position: static;
}
+
+@media (max-width: 768px) {
+
+ #main-wrapper {
+ margin:10px 0;
+ padding:0;
+ }
+
+ #main {
+ margin-top:0;
+ }
+}
\ No newline at end of file
Modified: trunk/plugins/qtArchivesCanadaPlugin/css/main.less
==============================================================================
--- trunk/plugins/qtArchivesCanadaPlugin/css/main.less Tue Feb 14 17:14:24
2012 (r10893)
+++ trunk/plugins/qtArchivesCanadaPlugin/css/main.less Tue Feb 14 21:42:07
2012 (r10894)
@@ -19,7 +19,7 @@
@orange: #f6ac00;
@gray: #6d6d6d;
@grayLight: #c2c2c2;
-@grayDark: #3b3b3b;
+@grayDark: #3b3b3b;
// Links
@linkColor: @blue;
@@ -32,6 +32,7 @@
@textColor: @grayDark;
+// Archives Canada CSS files (written in LESS)
@import "less/_scaffolding";
@import "less/_buttons";
@import "less/_header";
@@ -41,7 +42,10 @@
+@media (max-width: 768px) {
+
+}
/*
* z-index tree
@@ -53,4 +57,21 @@
* tooltips 10750
* header 11000
* sfwebdebug 50000
- */
\ No newline at end of file
+ */
+
+
+/* ————— RESPONSIVE DESIGN FOR DEVICES —————
+
+// Landscape phones and down
+@media (max-width: 480px) { }
+
+// Landscape phone to portrait tablet
+@media (max-width: 768px) { }
+
+// Portrait tablet to landscape and desktop
+@media (min-width: 768px) and (max-width: 980px) { }
+
+// Large desktop
+@media (min-width: 1200px) { }
+
+*/
\ No newline at end of file
Modified: trunk/plugins/qtArchivesCanadaPlugin/images/ArchivesCanadaLogo.png
==============================================================================
Binary file (source and/or target). No diff available.
Modified: trunk/plugins/qtArchivesCanadaPlugin/templates/_header.php
==============================================================================
--- trunk/plugins/qtArchivesCanadaPlugin/templates/_header.php Tue Feb 14
17:14:24 2012 (r10893)
+++ trunk/plugins/qtArchivesCanadaPlugin/templates/_header.php Tue Feb 14
21:42:07 2012 (r10894)
@@ -5,7 +5,7 @@
<?php if ($sf_user->isAuthenticated()): ?>
- <div class="span6">
+ <div id="adminmenu" class="span6">
<ul>
<?php echo get_component('menu', 'mainMenu', array('sf_cache_key'
=> $sf_user->getCulture().$sf_user->getUserID())) ?>
</ul>
@@ -57,21 +57,24 @@
</div> <!-- /#first-level -->
+ <div id="second-level">
+ <div id="logo-and-name">
- <div id="second-level" class="row">
-
- <div id="logo-and-name" class="span6">
+ <h1>
+
<?php if (sfConfig::get('app_toggleLogo')): ?>
- <?php echo link_to(image_tag('logo', array('alt' => __('Home'))),
'@homepage', array('id' => 'logo', 'rel' => 'home', 'title' => __('Home'))) ?>
+ <?php echo
link_to(image_tag($sf_request->getRelativeUrlRoot().'/plugins/qtArchivesCanadaPlugin/images/ArchivesCanadaLogo.png'),
url_for('@homepage')); ?>
<?php endif; ?>
- <?php if (sfConfig::get('app_toggleTitle')): ?>
- <h1>
- <?php echo link_to(sfConfig::get('app_siteTitle'),
'@homepage', array('rel' => 'home', 'title' => __('Home'))) ?>
- </h1>
- <?php endif; ?>
- </div>
+
+ <?php if (sfConfig::get('app_toggleTitle')): ?>
+ <?php //echo link_to(sfConfig::get('app_siteTitle'), '@homepage',
array('rel' => 'home', 'title' => __('Home'))) ?>
+ <?php endif; ?>
+
+ </h1>
+
+ </div>
- <?php echo get_component('search', 'box') ?>
+ <?php echo get_component('search', 'box') ?>
</div> <!-- /#second-level -->
Modified: trunk/plugins/qtArchivesCanadaPlugin/templates/layout.php
==============================================================================
--- trunk/plugins/qtArchivesCanadaPlugin/templates/layout.php Tue Feb 14
17:14:24 2012 (r10893)
+++ trunk/plugins/qtArchivesCanadaPlugin/templates/layout.php Tue Feb 14
21:42:07 2012 (r10894)
@@ -2,6 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="<?php echo
$sf_user->getCulture() ?>"<?php if ('rtl' ==
sfCultureInfo::getInstance($sf_user->getCulture())->direction): ?>
dir="rtl"<?php endif; ?>>
<head>
<link
href='http://fonts.googleapis.com/css?family=IM+Fell+Great+Primer:400,400italic'
rel='stylesheet' type='text/css'>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0,
user-scalable=no">
<?php include_http_metas() ?>
<?php include_metas() ?>
<?php include_title() ?>
--
You received this message because you are subscribed to the Google Groups
"Qubit Toolkit Commits" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/qubit-commits?hl=en.
