Anonymous avatar Anonymous committed 6d4e5ba

Switching to Bootstrap CSS. Half-done work.

Comments (0)

Files changed (2)

txclib/static/css/txclient.css

 div.reslist .row {
  border-bottom: 1px solid #DDD;
 }
+

txclib/templates/index.html

 
     <!-- Le styles -->
     <link href="{{ url_for('static', filename='css/bootstrap.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/bootstrap-responsive.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/txclient.css') }}" rel="stylesheet">
+
     <style type="text/css">
-      body {
-        padding-top: 70px;
-        padding-bottom: 40px;
-      }
-      .sidebar-nav {
-        padding: 9px 0;
-      }
-  
-	  table.ress tr td.r_name { width: 13em; }
-	  table.ress tr td.r_name > span.wr { padding-left: 1em; }
-	  table.ress tr.sep th { text-transform: uppercase; font-weight: bold; padding-top: 0.5em; padding-left: 0.5em; border-bottom: 1px solid #eee; }
-	  table.ress td.actions { text-align: right; padding: 0 1em; }
-	  table.ress td.actions.span { visible: none; }
-	  table.ress dl { margin: 0; }
-	  table.ress dl dt { float: left; width: 5em; }
-	  table.ress dl dd { font-family: 'Courier new'; font-size: 90%; }
-	  span.lang { color: #383; background-color: #F0F7F0; }
-	  
-	  table.ress span.i16 { line-height: 20px; }
-	  .i16.loading { background-image: url('{{ url_for('static', filename='img/ajax-loader.gif') }}'); color: #777; }
-	  span.action_ok { color: green; }
-	  .result.ajax_error { color: #D73D29; background-color: #F4E3E1; padding: 0 0.3em; }
-	  table.ress td input { vertical-align: middle; padding-right: 1em; }
-	  table.ress tr.highlight { background-color: #fffff0 !important; }
-	  table.ress tr:hover { background-color: #fffff0 !important; }
-	  table.ress tr:hover .edit { border-bottom: 1px dotted #ccc; }
-	  p.tableactions { margin-top: 1em; background-color: #f5f5f5; border-bottom: 2px solid #ddd; border-top: 1px solid #ddd; padding: 0.5em 1em; }
-	  
-	  .edit form input { width: 150px; }
-
+      span.lang { color: #383; background-color: #F0F7F0; }
+      .edit { padding: 2px 3px; border-bottom: 1px dotted transparent; }
+      .edit:hover { cursor: text; border-bottom: 1px dotted #bbb; }
+      .res-row:hover { background-color: #F5F5F5; }
     </style>
 
     <script type="text/javascript">
-    var SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
+      var SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
     </script>
 
-    <link href="{{ url_for('static', filename='css/bootstrap-responsive.css') }}" rel="stylesheet">
-
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!--[if lt IE 9]>
       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 
   <body>
 
-    <div class="navbar navbar-fixed-top">
+    <!-- header -->
+    <div class="navbar">
       <div class="navbar-inner">
         <div class="container">
           <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
     </div>
 
     <div class="container show-grid reslist">
-      {% for res in res_list %}
-      <div class="row" id="tr_{{ res.id }}">
-        <div class="span3 tdbox">
-          <span class="wr">
-            <span data-action='rename' class="resname edit" id="{{ res.id }}">{{ res.id }}</span>
-            <span class="links" style="margin-left: 0.5em;">
-              <a href="{{ res.r_url }}" target="_blank"><img src="{{ url_for('static', filename='img/icon-ext-link.png') }}" alt="Visit page" title="Resource on Transifex" /></a>
+
+        {% for res in res_list %}
+        <div class="row span10 res-row" id="tr_{{ res.id }}">
+
+          <div class="span3 tdbox">
+            <label class="checkbox">
+              <input type="checkbox" id="optionsCheckbox" value="option1" class="rowcheckbox">
+              <span data-action='rename' class="resname edit" id="{{ res.id }}">{{ res.id }}</span>
             </span>
-          </span>
+            </label>
+          </div>
+
+          <div class="span5 tdbox">
+            <span class="edit resexpr" data-id="{{ res.id }}">{{ res.expr_highlight|safe }}</span></dd>
+          </div>
+          <div class="span1 tdbox">
+            <span class="label label-default">OK</span>
+          </div>         
+        </div><!--/row-->
+        {% endfor %}
+
+        <div class="row span10" id="tr_th" style="background-color: #F9F9F9">
+          <div class="span3 tdbox">
+            <label class="checkbox">
+              <input type="checkbox" id="optionsCheckbox" value="option1">
+              Select all
+            </label>
+          </div>
         </div>
-        <div class="span5 tdbox">
-          <span class="edit resexpr" data-id="{{ res.id }}">{{ res.expr_highlight|safe }}</span></dd>
+
+        <div class="row span9 form-actions control-group">
+          <label class="control-label">With selected:</label>
+          <button type="submit" class="btn" rel="tooltip" data-original-title="Pull all languages, including source"><i class="icon-download"></i> Pull translations</button>
+          <button type="submit" class="btn push-action btn-danger" rel="tooltip" data-original-title="Push all languages except source"><i class="icon-upload icon-white"></i> Push source</button>
         </div>
-        <div class="span2 actions tdbox">
-          <a href="#" data-action='pull' data-id="{{ res.id }}" title="Pull all languages (including source)">Pull</a>
-          <span class="result" style="display: none;"></span>
-          <a href="#" data-action='push' data-id="{{ res.id }}" title="Push all languages except source">Push</a>
-          <span class="result" style="display: none;"></span>
-        </div>
-      </div><!--/row-->
-      {% endfor %}
 
-
-      <div class="row">
+      <div class="row span12">
       <hr>
       <footer >
-        <p>&copy; <a href="https://www.transifex.com/">Transifex</a> 2012 // Running <a href="http://help.transifex.com/features/client/">Transifex Client</a> v{{ txc_version }}</p>
+        <p>&copy; <a href="https://www.transifex.com/">Transifex</a> 2012 • <a href="http://help.transifex.com/features/client/">Transifex Client</a> v{{ txc_version }}</p>
       </footer>
       </div>
     </div>
     <script src="{{ url_for('static', filename='js/jquery.jeditable.js') }}"></script>
 
     <script src="{{ url_for('static', filename='js/txclient.js') }}"></script>
+    <script type="text/javascript">
+      $(document).ready(function(){
+        $('.pull-action').tooltip()
+        $('.push-action').tooltip()
+        /* All checkboxes enabled by default */
+        $('.rowcheckbox').prop("checked", true);
+      });
+    </script>
 
   </body>
 </html>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.