Total front-end style rewrite. NOW WITH BOOTSTRAP! :)

dlareau · Dec 23, 2015 · 3fcf050 · 3fcf050
1 parent e4bee02
commit 3fcf050
Show file tree

Hide file tree

Showing 7 changed files with 208 additions and 225 deletions.
diff --git a/huntserver/static/huntserver/base.css b/huntserver/static/huntserver/base.css
@@ -1,63 +1,24 @@
-\html {
-    background-image: url(http://www.millionaireinvestor.asia/images/Background.jpg);
+body {
+    background: url(http://www.millionaireinvestor.asia/images/Background.jpg);
 }
 
-body {
+.content {
     font-family: verdana;
     font-size: 14px;
-    margin: 20px;
-    padding: 20px;
+    padding: 10px;
+    padding-top: 0px;
+    margin-right: 10px;
+    margin-bottom: 10px;
     background: white;
-    border: 4px solid black; 
-}
-
-header {
-    margin: 0 -20px;
-    margin-top: -20px;
-    background-color: lightgray;
-    padding: 15px;
-    border-bottom: 4px solid black;
-    overflow: hidden;
-}
-
-#container {
-    overflow: hidden;
-}
-
-#content-left {
-    float: left;
-    border-right: 4px solid black;
+    border: 3px solid black; 
 }
 
-#content-right {
-    padding: 20px;
-    border-left: 4px solid black;
-    margin-left: -4px;
-    padding-right: 0px;
-    float: left;
+th {
+    text-align: left;
 }
 
 #plot {
-    width: 450px;
-    background-color: white; /* maybe gray? */
-    border: 1px solid black;
-    padding: 5px;
-}
-
-#left-header{
-    float: left;
-}
-
-#right-header{
-    float: right;
-}
-
-.puzzle {
-    overflow: hidden;
-}
-
-th {
-    text-align: left;
+    margin-top: 10px;
 }
 
 .puzzle td img{
@@ -66,24 +27,10 @@ th {
     height: 30px;
 }
 
-/* For the puzzle page */
+/*for puzzle page*/
 .puzzle, .info {
     overflow: auto;
 }
-
-.puzzle fieldset {
-    float: left;
-    padding: 20px;
-    margin: 20px;
-}
-
-.puzzle fieldset#submit {
-    width: 30%;
-}
-
-.puzzle fieldset#answers {
-    width: 40%;
-}
 
 .puzzle .info h1 {
     float: left;
@@ -93,6 +40,14 @@ th {
     float: right;
 }
 
+.puzzle fieldset {
+    margin: 20px;
+}
+
+.puzzle fieldset td,th {
+    padding-right: 10px;
+}
+
 .puzzle #puzzleimg {
     width: 100%;
     max-width: 900px;

diff --git a/huntserver/static/huntserver/chat.css b/huntserver/static/huntserver/chat.css
@@ -1,9 +1,11 @@
 #chatcontainer {
   border: 1px solid black; 
-  max-width: 900px; 
   min-height: 100px; 
+  max-height: 400px;
+  padding: 15px;
   background-color: lightgrey; 
   border-radius:3px;
+  overflow: auto;
 }
 
 .chatselect {
@@ -21,12 +23,10 @@
 #messagebox {
   border-radius:3px; 
   height: 25px; 
-  width: 400px; 
-  float: left; 
+  width: 50%;
   margin-right: 10px;
 }
 
 #sendbutton {
   height: 25px;
-  float: left;
 }
diff --git a/huntserver/templates/base.html b/huntserver/templates/base.html
@@ -2,29 +2,61 @@
 <html>
   <head>
     <title>{% block title %} Puzzlehunt! {% endblock title %}</title>
+    <script src="{{ STATIC_URL }}jquery.min.js"></script>
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
+
+    <!-- Latest compiled and minified JavaScript -->
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
     <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}huntserver/base.css">
     {% block includes %} {% endblock includes %}
   </head>
   <body>
-    <header>
-      <div id='left-header'>
-        {% block left-header %}
-          {% if user.is_authenticated %}
-            Team: {{user.team.team_name}}
-            </br>
-            <a href="/accounts/logout/">[Click here to logout]</a>
-          {% else %}
-            <p>Welcome Guest, Please <a href="/accounts/login/">log in</a> or <a href="/registration/">register.</a></p>
-          {% endif %}
-        {% endblock %}
-      </div>
-      <div id='right-header'> 
-        {% block right-header %}
-        {% endblock %}
-      </div> 
-    </header>
-    {% block content %} 
-
-    {% endblock content %}
+
+
+
+    <nav class="navbar navbar-default">
+      <div class="container-fluid">
+        <!-- Brand and toggle get grouped for better mobile display -->
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="/">PuzzlehuntCMU</a>
+        </div>
+
+        <!-- Collect the nav links, forms, and other content for toggling -->
+        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+          <ul class="nav navbar-nav">
+            {% block left-header %}
+              {% if user.is_authenticated %}
+                <li class="active"><a href="#">Link </a></li>
+                <li><a href="#">Link</a></li>
+              {% else %}                
+                <li class="active"><a href="#">Link </a></li>
+                <li><a href="#">Link</a></li>
+                <li><a href="/registration/">Register</a></li>
+              {% endif %}
+            {% endblock %}
+          </ul>
+          <ul class="nav navbar-nav navbar-right">
+            {% block right-header %}
+              {% if user.is_authenticated %}
+                <p class="navbar-text">
+                  Team: {{user.team.team_name}}
+                </p>
+                <a class="btn btn-default navbar-btn" href="/accounts/logout/">Log out</a>
+              {% else %}
+                <a class="btn btn-default navbar-btn" href="/accounts/login/">Log in</a>
+              {% endif %}
+            {% endblock %}
+          </ul>
+        </div><!-- /.navbar-collapse -->
+      </div><!-- /.container-fluid -->
+    </nav>
+    {% block content %} {% endblock content %}
   </body>
 </html>
diff --git a/huntserver/templates/chat.html b/huntserver/templates/chat.html
@@ -7,24 +7,25 @@
 <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}huntserver/chat.css">
 {% endblock includes %}
 
-{% block right-header %}  <a href='/'>Go back to all puzzles</a>{% endblock %}
-
 {% block content %}
-<div style="overflow: hidden; margin-bottom: 20px" >
-  <h1> Chat with staff </h1>
-  <p> Chatbox: </p>
-  <div style="padding: 15px;" id="chatcontainer">
-    {% for message in messages %}
-      {% if message.is_response %}
-        <div style='white-space:pre-wrap; color:red;'>Admin     : {{ message.text }}</div>
-      {% else %}
-        <div style='white-space:pre-wrap;'>{{ team.team_name|slice:":10"|ljust:10 }}: {{ message.text }}</div>
-      {% endif %}
-    {% endfor %}
-  </div>
-  <div style="margin-top: 10px">
-    <input id="messagebox" typpe='text'> </input>
-    <button id="sendbutton">Send</button>
+<div class="container">
+  <div class="row">
+    <div class="col-md-12 content">
+      <h1> Chat with staff </h1>
+      <div id="chatcontainer">
+        {% for message in messages %}
+          {% if message.is_response %}
+            <div style='white-space:pre-wrap; color:red;'>Admin     : {{ message.text }}</div>
+          {% else %}
+            <div style='white-space:pre-wrap;'>{{ team.team_name|slice:":10"|ljust:10 }}: {{ message.text }}</div>
+          {% endif %}
+        {% endfor %}
+      </div>
+      <div style="margin-top: 10px">
+        <input id="messagebox" type='text'> </input>
+        <button id="sendbutton">Send</button>
+      </div>
+    </div>
   </div>
 </div>
   <script type='text/javascript'>