[SUCS Devel] [Git][sucssite/sucs-site][master] 2 commits: Site now does some basic scaling for mobile phone. As well as fixed footer

[Tom Lake]

Tom Lake pushed to branch master at sucssite / sucs-site


Commits:
521ddbcd by Isabel Jenkins at 2017-08-20T21:10:57+01:00
Site now does some basic scaling for mobile phone. As well as fixed footer

- - - - -
9b5d6a8b by Isabel Jenkins at 2017-08-20T21:11:46+01:00
Merge branch 'master' of projects.sucs.org:unreturnable/sucs-site

- - - - -


4 changed files:

- htdocs/css/sucs.css
- static/fragments/Join.txt
- templates/foot.tpl
- templates/head.tpl


Changes:

=====================================
htdocs/css/sucs.css
=====================================
--- a/htdocs/css/sucs.css
+++ b/htdocs/css/sucs.css
@@ -7,6 +7,7 @@ body {
     margin: 0;
     background: #f2f2f2;
     min-width: 600px;
+    height: calc(100vh - 30px);
 }
 
 hr {
@@ -38,7 +39,6 @@ a:hover {
    -------------------------------------------------- */
 
 #branding {
-    background: url('/images/orangefade.png') repeat-x #ffc62b bottom;
     clear: both;
 }
 
@@ -92,6 +92,13 @@ a:hover {
     border-radius: 0px
 }
 
+.join-header {
+  font-size: 30pt;
+  margin-left: 10px;
+  text-decoration: none;
+  color: #ffc62b !important;
+}
+
 /* --------------------------------------------------
     Breadcrumb
    -------------------------------------------------- */
@@ -129,36 +136,92 @@ a:hover {
    -------------------------------------------------- */
 
 #wrapper {
-    background: #f2f2f2;
-    min-height: 100%;
-    margin-top: 10px;
+  background: #f2f2f2;
+  min-height: 100%;
+  margin-top: 10px;
 }
 
 #navigation {
-    float: left;
-    width: 17%;
-    padding-top: 0.5em;
-    /*	overflow: auto; */
+  float: left;
+  width: 300px;
+  padding-top: 0.5em;
 }
 
 #content {
-    float: right;
-    width: 82%;
+  float: right;
+  width: calc(100% - 300px);
 }
 
 #primary {
-    float: left;
-    width: 66%;
-    padding: 0;
+  float: left;
+  width: calc(100% - 400px);
 }
 
 #primaryC {
-    padding-right: 0.5em;
+  padding-left: 20px;
+  padding-right: 20px;
 }
 
 #secondary {
-    float: right;
-    width: 33%;
+  float: right;
+  width: 400px;
+}
+
+ at media only screen and (max-width: 1080px) {
+  #wrapper {
+    margin-top: -5px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  #navigation {
+    order: 1;
+    width: 100%;
+    float: top;
+  }
+
+  #content {
+    margin-top: 10px;
+    order: 2;
+    float: bottom;
+    width: 100%;
+  }
+
+  #primary {
+    float: none;
+    width: 100%;
+  }
+
+  #secondary {
+    float: none;
+    width: 100%;
+  }
+
+  #footer {
+    height: auto !important;
+  }
+
+  #branding {
+    height: auto !important;
+  }
+
+  #logo {
+    padding-right: 0;
+  }
+
+  #title h1 {
+    margin-top: 20px;
+    font-size: 12pt;
+    padding-left: 0;
+  }
+
+  #breadcrumb li {
+    display: block;
+  }
+
+  #loginForm {
+    padding-top: 1em;
+  }
 }
 
 /* --------------------------------------------------
@@ -263,15 +326,18 @@ ul#valid {
     Footer
    -------------------------------------------------- */
 
+#footer-fix {
+    min-height: calc(100% - 16px);
+}
+
 #footer {
     background: #e65c00;
-    margin-bottom: -20px;
+    height: 30px;
 }
 
 #footer p {
     text-align: center;
     padding-top: 5px;
-    padding-bottom: 5px;
 }
 
 /* --------------------------------------------------


=====================================
static/fragments/Join.txt
=====================================
--- a/static/fragments/Join.txt
+++ b/static/fragments/Join.txt
@@ -1,6 +1,6 @@
 <!-- Joining box --> 
 <div class="cbb"> 
-<h3>Join SUCS!</h3> 
+<a class="join-header" href="https://www.swansea-union.co.uk/activities/society/sucs/" target="_blank">Join SUCS!</a>
 <p>As well as being an excellent way to meet people with similar interests (we have regular social events and we're all really nice), you also get all this great stuff: </p> 
 <ul> <li>Use of our dedicated <a href="../Games/" title="Gameserver">games server</a></li> 
 <li><a href="../Knowledge/Help/SUCS%20Services/Using%20your%20web%20space">Web hosting</a> with scripting and database support</li>


=====================================
templates/foot.tpl
=====================================
--- a/templates/foot.tpl
+++ b/templates/foot.tpl
@@ -15,6 +15,7 @@
 
 <div class="clear"></div>
 </div>
+</div>
 
 <div id="footer">
     <p>Site designed and maintained by SUCS. All opinions expressed are those of the relevant individual and not of the society.</p>


=====================================
templates/head.tpl
=====================================
--- a/templates/head.tpl
+++ b/templates/head.tpl
@@ -31,7 +31,8 @@
           content="Swansea University Computer Society - providing student computing facilities and personal web pages."/>
     {if $refresh}
         <meta http-equiv="REFRESH" content="{$refresh}" />{/if}
-
+    
+    <meta name="viewport" content="width=device-width">
 
     {if isset($extra_scripts)}
         {foreach from=$extra_scripts item=script}
@@ -54,10 +55,9 @@
 </head>
 <body>
 
-{include file="branding.tpl"}
-
-
-<div id="wrapper">
+  <div id="footer-fix">
+    {include file="branding.tpl"}
 
-    <div id="content">
-        {include file="usermessages.tpl"}
+    <div id="wrapper">
+	<div id="content">
+	  {include file="usermessages.tpl"}



View it on GitLab: https://projects.sucs.org/sucssite/sucs-site/compare/a706160396accd9ef4171fb6f63389b5d94ee035...9b5d6a8b489bd9d43c0e0f1b04418ab2ae4c463a

---
View it on GitLab: https://projects.sucs.org/sucssite/sucs-site/compare/a706160396accd9ef4171fb6f63389b5d94ee035...9b5d6a8b489bd9d43c0e0f1b04418ab2ae4c463a
You're receiving this email because of your account on projects.sucs.org.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.sucs.org/pipermail/devel/attachments/20170820/fb2df33e/attachment-0001.html>