Commits

Brent Tubbs  committed c6e1ade

first pass at styling

  • Participants
  • Parent commits 8021989

Comments (0)

Files changed (3)

         account = get_account(user) 
         vars = {
             'account': account,
+            'logout_url': users.create_logout_url("/"),
         }
         result = template.render(tmpl, vars)
         self.out(result)

File static/tmplatur.css

 .half_block {
     width: 500px;
-    height: 500px;
+    /*height: 500px;*/
     float: left;
     margin-left: 10px;
+    padding: 10px 0 0 10px;
 }
 
 .full_block {
-    width: 1010;
+    width: 1020px;
     float: left;
     margin-left: 10px;
+    /*min-height: 500px;*/
+    padding: 10px 0 0 10px;
+}
+
+h3 {
+    margin-bottom: 3px;
+}
+
+.half_inner {
+    width: 500px;
+    height: 500px;
+    -moz-box-shadow: inset 0 0 5px black;
+    -webkit-box-shadow: inset 0 0 5px black;
+    box-shadow: inset 0 0 5px black;
+    margin-top: 10px;
+    /*color: white;*/
+    /*background: #151515;*/
+    padding: 5px;
+    border: 0px black none;
+}
+
+
+#header {
+    background-color: #151515;
+    color: white;
+    padding: 10px;
+    border-bottom: 1px solid black;
+    -moz-box-shadow: 0 2px 5px #151515;
+    -webkit-box-shadow: 0 2px 5px #151515;
+    box-shadow: 0 2px 5px #151515;
+}
+
+#header h1 {
+    font-weight: bold;
+    font-size: 25px;
+    margin: 10px;
+    float: left;
+}
+
+body {
+    background-color: #2e2e2e;
+    font-family: 'Droid Sans', arial, serif;
+    font-size: 15px;
+    color: white;
+}
+
+#username {
+    float: right;
+}
+
+#username a {
+    color: #6EA6FF;
+    font-style: italic;
+    font-size: 10px;
+}
+
+.clear {
+    clear: both;
+}
+
+#main {
+    padding-top: 10px;
+    margin-bottom: 20px;
+}
+
+textarea {
+    font-family: 'Droid Sans Mono' , Monaco, Lucida Console, Courier New, Courier;
+}
+
+#btn_render {
+    float: right;
+    margin: 0px;
+    display: block;
+    line-height: 1.4;
+    font-size: 14px;
+    font-weight: bold;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+    cursor: pointer;
+    -webkit-transition: all 0.25s ease-in-out;
+    -moz-transition: all 0.25s ease-in-out;
+    -o-transition: all 0.25s ease-in-out;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    border: 1px solid #B6B6B6;
+    /*font-weight: normal;*/
+    color: #4F4F4F;
+    background: -webkit-gradient( linear, left bottom, left top, color-stop(1, #EDEDED), color-stop(0, #C4C4C4) );
+    background: -moz-linear-gradient( center top, #EDEDED, #C4C4C4 );
+    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
+    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
+    padding: 5px 20px;
+}
+
+#btn_render:active {
+    color: #1C4257;
+	outline: none;
+	color: #1c4257; border: 1px solid #7096ab;
+	background: -webkit-gradient(
+        linear,
+        left bottom,
+        left top,
+        color-stop(1, rgb(185,224,245)),
+        color-stop(0, rgb(146,189,214))
+	);
+	background: -moz-linear-gradient(
+        center top,
+        rgb(185,224,245),
+        rgb(146,189,214)
+	);
+	-webkit-box-shadow: none;
+	-moz-box-shadow: none;
+} 
+
+#rendered {
     min-height: 500px;
+    width: 100%;
+    background: white;
+    margin-bottom: 20px;
+    -moz-box-shadow: inset 0 0 5px black;
+    -webkit-box-shadow: inset 0 0 5px black;
+    box-shadow: inset 0 0 5px black;
+    margin-top: 10px;
 }

File templates/index.html

 <html>
 <head>
+    <link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&amp;subset=latin" rel="stylesheet" type="text/css"> 
+    <link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="/static/reset.css" type="text/css" media="screen" charset="utf-8">
     <link rel="stylesheet" href="/static/tmplatur.css" type="text/css" media="screen" charset="utf-8">
     <title>Tmplatur</title>
     </style>
 </head>
 <body>
-    Hi {{ account.user.nickname }}
+  
+  <div id="header">
+    <h1>Tmplatur</h1>
+    <div id="username">{{ account.user.nickname }} <a href="{{ logout_url }}">Logout</a></div>
+    <div class="clear"></div>
+  </div>
+
+  <div id="main">
+      
     <form method="post" >
-    <textarea name="data" class="half_block">{{ account.data }}</textarea>
-    <textarea name="template" class="half_block">{{ account.template }}</textarea>
-    <input type="submit" value="Submit" />
+    
+    <div class="half_block">
+        <h3>Data</h3>
+        <textarea name="data" class="half_inner">{{ account.data }}</textarea>
+    </div>
+    
+    <div class="half_block">
+      <h3>Template</h3>
+      <textarea name="template" class="half_inner">{{ account.template }}</textarea>
+    </div>
+    
+    <div class="full_block">
+        <input type="submit" value="Render" id="btn_render" />
+    </div>
+
     </form>
-    <div style="clear: both;"></div>
-    <iframe src="/rendered" class="full_block"></iframe>
+    
+    <div class="full_block">
+        <h3>Result</h3>
+        <iframe id="rendered" src="/rendered"></iframe>
+    </div>
+  </div>
 </body>
 </html>