Seperated index into views

Added new test view (incomplete) A few css tweaks
gophergala · Jan 24, 2015 · 359ea6d · 359ea6d
1 parent f563394
commit 359ea6d
Show file tree

Hide file tree

Showing 21 changed files with 374 additions and 128 deletions.
diff --git a/assets/fonts/Montserrat-Bold.ttf b/assets/fonts/Montserrat-Bold.ttf
diff --git a/assets/fonts/Montserrat-Regular.ttf b/assets/fonts/Montserrat-Regular.ttf
diff --git a/assets/fonts/Pacifico.ttf b/assets/fonts/Pacifico.ttf
diff --git a/assets/index.html b/assets/index.html
@@ -11,9 +11,6 @@
     <meta name="author" content="">
 
     <!-- Stylesheets -->
-    <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
-    <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
-    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="stylesheets/main.css">
 
     <!-- Javascripts -->
@@ -43,46 +40,9 @@ <h1>
     </div>
   </header>
 
-  <main>
-    <section id="hero">
-      <div class="container">
-        <h2>A load/stress testing tool without... stress</h2>
-        <a href="/#/new">Try me !</a><a href="https://github.com/gophergala/gopherling">Contribute</a>
-      </div>
-    </section>
-
-    <section id="how-to">
-      <div class="container">
-        <h2>How it works</h2>
-        <ul>
-        	<li>
-            <span>
-              <i class="icon-docs"></i>
-            </span>
-        		<p>Create a new test</p>
-        	</li>
-        	<li>
-            <span>
-              <i class="icon-plus-squared"></i>
-            </span>
-        		<p>Add a list of tasks to run</p>
-        	</li>
-        	<li>
-            <span>
-              <i class="icon-eye"></i>
-            </span>
-        		<p>Monitor the requests in real-time</p>
-        	</li>
-        </ul>
-      </div>
-    </section>
+  <main ng-view>
   </main>
 
-  <footer>
-    <div class="container">
-      <span>Gopherling is developed by Frostwind for the Gophergala.</span>
-    </div>
-  </footer>
 
 </body>
 

diff --git a/assets/stylesheets/elements.styl b/assets/stylesheets/elements.styl
@@ -26,3 +26,6 @@ button(bg-color = $blue, text-color = white)
     border 2px solid text-color
     color text-color
     opacity .4
+
+input:disabled
+  opacity .4
diff --git a/assets/stylesheets/fonts.styl b/assets/stylesheets/fonts.styl
@@ -0,0 +1,31 @@
+@font-face {
+  font-family: 'fontello';
+  src: url('../fonts/fontello.eot?64691259');
+  src: url('../fonts/fontello.eot?64691259#iefix') format('embedded-opentype'),
+       url('../fonts/fontello.woff?64691259') format('woff'),
+       url('../fonts/fontello.ttf?64691259') format('truetype'),
+       url('../fonts/fontello.svg?64691259#fontello') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Pacifico';
+  src: url('../fonts/Pacifico.ttf');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../fonts/Montserrat-Regular.ttf');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../fonts/Montserrat-Bold.ttf');
+  font-weight: bold;
+  font-style: normal;
+}
diff --git a/assets/stylesheets/icons.styl b/assets/stylesheets/icons.styl
@@ -1,24 +1,3 @@
-@font-face {
-  font-family: 'fontello';
-  src: url('../fonts/fontello.eot?64691259');
-  src: url('../fonts/fontello.eot?64691259#iefix') format('embedded-opentype'),
-       url('../fonts/fontello.woff?64691259') format('woff'),
-       url('../fonts/fontello.ttf?64691259') format('truetype'),
-       url('../fonts/fontello.svg?64691259#fontello') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
-/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
-/*
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-  @font-face {
-    font-family: 'fontello';
-    src: url('../font/fontello.svg?64691259#fontello') format('svg');
-  }
-}
-*/
-
 [class^="icon-"]:before, [class*=" icon-"]:before {
   font-family: "fontello";
   font-style: normal;

diff --git a/assets/stylesheets/main.styl b/assets/stylesheets/main.styl
@@ -1,6 +1,7 @@
 @import 'jeet'
 @import 'citrine'
 
+@import 'fonts'
 @import 'colors'
 @import 'icons'
 @import 'animations'
@@ -56,7 +57,6 @@ body > header
       a
         color white
         display inline-block
-        font-family 'Montserrat', sans-serif
         font-size remify(13)
         font-weight 700
         height remify(74)
@@ -65,7 +65,7 @@ body > header
         &:hover
           color white
 
-body > footer
+main > footer
   background darken($blue, 80%)
   padding remify(32) 0
   span
@@ -78,7 +78,6 @@ body > footer
 
   h2
     color white
-    font-family 'Montserrat', sans-serif
     font-size remify(48)
     font-weight bold
     text-shadow #fff 0 0 1px, #000 1px 1px 1px
@@ -132,3 +131,39 @@ body > footer
         transition color 0.3s ease
     p
       margin-top remify(180)
+
+.subheader
+  background darken($blue, 10%)
+  padding remify(38)
+
+  h2
+    color white
+    font-size remify(32)
+    font-weight bold
+    text-transform uppercase
+    text-shadow #fff 0 0 0px, #fff 0px 0px 1px
+
+#new
+  form
+    col(1/2, cycle:2)
+    border 1px solid $very-light-grey
+    border-radius 4px
+    margin 0 auto
+    margin-top remify(38)
+    fieldset
+      padding remify(12)
+      li
+        display inline-block
+      input, label
+        display block
+        width 100%
+      input
+        border 1px solid $very-light-grey
+        border-radius 2px
+        margin-top remify(6)
+        padding remify(6)
+      select
+        background white
+        border-radius 2px
+        margin-top remify(6)
+        padding remify(6)
diff --git a/assets/views/home.html b/assets/views/home.html
@@ -0,0 +1,38 @@
+    <section id="hero">
+      <div class="container">
+        <h2>A load/stress testing tool without... stress</h2>
+        <a href="/#/new">Try me !</a><a href="https://github.com/gophergala/gopherling">Contribute</a>
+      </div>
+    </section>
+
+    <section id="how-to">
+      <div class="container">
+        <h2>How it works</h2>
+        <ul>
+        	<li>
+            <span>
+              <i class="icon-docs"></i>
+            </span>
+        		<p>Create a new test</p>
+        	</li>
+        	<li>
+            <span>
+              <i class="icon-plus-squared"></i>
+            </span>
+        		<p>Add a list of tasks to run</p>
+        	</li>
+        	<li>
+            <span>
+              <i class="icon-eye"></i>
+            </span>
+        		<p>Monitor the requests in real-time</p>
+        	</li>
+        </ul>
+      </div>
+    </section>
+
+    <footer>
+      <div class="container">
+        <span>Gopherling is developed by Frostwind for the Gophergala.</span>
+      </div>
+    </footer>
diff --git a/assets/views/new.html b/assets/views/new.html
@@ -0,0 +1,55 @@
+    <section class="subheader">
+      <div class="container">
+        <h2>Add a new test</h2>
+      </div>
+    </section>
+
+    <section id="new">
+      <div class="container">
+        <form action="">
+          <fieldset>
+            <label for="">Name</label>
+            <input type="text" placeholder="My awesome test">
+          </fieldset>
+          <fieldset>
+            <label for="">Description</label>
+            <input type="text" placeholder="This is the best test ever made in human history">
+          </fieldset>
+          <fieldset>
+            <label for="">Base URI</label>
+            <input type="text" placeholder="http://gopherling.tld:8080">
+          </fieldset>
+          <fieldset>
+            <label for="">Number of users</label>
+            <input type="text" placeholder="Test name">
+          </fieldset>
+          <fieldset>
+            <label for="">Users spawn/second</label>
+            <input type="text" placeholder="Test name">
+          </fieldset>
+        </form>
+        <form action="">
+          <fieldset>
+            <ul>
+              <li>
+                <label for="">Method</label>
+                <select id="" name="">
+                  <option value="GET">GET</option>
+                  <option value="POST">POST</option>
+                  <option value="PUT">PUT</option>
+                  <option value="DELETE">DELETE</option>
+                </select>
+              </li>
+              <li>
+                <label for="">Host</label>
+                <input type="text" disabled>
+              </li>
+              <li>
+                <label for="">Path</label>
+                <input type="text">
+              </li>
+            </ul>
+          </fieldset>
+        </form>
+      </div>
+    </section>
diff --git a/gulpfile.coffee b/gulpfile.coffee
@@ -49,7 +49,7 @@ gulp.task 'watch', () ->
     gulp.watch 'assets/javascripts/**/*.coffee', ['js']
     gulp.watch 'assets/stylesheets/**/*.styl', ['css']
     gulp.watch 'assets/fonts/**/*', ['fonts']
-    gulp.watch 'assets/*.html', ['html']
+    gulp.watch 'assets/**/*', ['html']
 
 gulp.task 'build', ['js', 'css', 'fonts', 'html']
 gulp.task 'server', ['build', 'webserver', 'watch']
diff --git a/static/fonts/Montserrat-Bold.ttf b/static/fonts/Montserrat-Bold.ttf
diff --git a/static/fonts/Montserrat-Regular.ttf b/static/fonts/Montserrat-Regular.ttf
diff --git a/static/fonts/Pacifico.ttf b/static/fonts/Pacifico.ttf
diff --git a/static/index.html b/static/index.html
@@ -11,9 +11,6 @@
     <meta name="author" content="">
 
     <!-- Stylesheets -->
-    <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
-    <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
-    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="stylesheets/main.css">
 
     <!-- Javascripts -->
@@ -43,46 +40,9 @@ <h1>
     </div>
   </header>
 
-  <main>
-    <section id="hero">
-      <div class="container">
-        <h2>A load/stress testing tool without... stress</h2>
-        <a href="/#/new">Try me !</a><a href="https://github.com/gophergala/gopherling">Contribute</a>
-      </div>
-    </section>
-
-    <section id="how-to">
-      <div class="container">
-        <h2>How it works</h2>
-        <ul>
-        	<li>
-            <span>
-              <i class="icon-docs"></i>
-            </span>
-        		<p>Create a new test</p>
-        	</li>
-        	<li>
-            <span>
-              <i class="icon-plus-squared"></i>
-            </span>
-        		<p>Add a list of tasks to run</p>
-        	</li>
-        	<li>
-            <span>
-              <i class="icon-eye"></i>
-            </span>
-        		<p>Monitor the requests in real-time</p>
-        	</li>
-        </ul>
-      </div>
-    </section>
+  <main ng-view>
   </main>
 
-  <footer>
-    <div class="container">
-      <span>Gopherling is developed by Frostwind for the Gophergala.</span>
-    </div>
-  </footer>
 
 </body>
 

diff --git a/static/stylesheets/elements.css b/static/stylesheets/elements.css
@@ -0,0 +1,3 @@
+input:disabled {
+  opacity: 0.4;
+}
diff --git a/static/stylesheets/fonts.css b/static/stylesheets/fonts.css
@@ -0,0 +1,25 @@
+@font-face {
+  font-family: 'fontello';
+  src: url("../fonts/fontello.eot?64691259");
+  src: url("../fonts/fontello.eot?64691259#iefix") format('embedded-opentype'), url("../fonts/fontello.woff?64691259") format('woff'), url("../fonts/fontello.ttf?64691259") format('truetype'), url("../fonts/fontello.svg?64691259#fontello") format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Pacifico';
+  src: url("../fonts/Pacifico.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Montserrat';
+  src: url("../fonts/Montserrat-Regular.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Montserrat';
+  src: url("../fonts/Montserrat-Bold.ttf");
+  font-weight: bold;
+  font-style: normal;
+}