Mobile dump

prose · May 30, 2013 · 3b38105 · 3b38105
1 parent 080b9d4
commit 3b38105
Show file tree

Hide file tree

Showing 20 changed files with 314 additions and 191 deletions.
diff --git a/app.css b/app.css
diff --git a/fonts/prose-885c7b2186162df68de6557c1525b167.eot b/fonts/prose-885c7b2186162df68de6557c1525b167.eot
diff --git a/fonts/prose-885c7b2186162df68de6557c1525b167.woff b/fonts/prose-885c7b2186162df68de6557c1525b167.woff
diff --git a/fonts/prose-cb9f9d60d23034b71ff3d8359434fb31.eot b/fonts/prose-cb9f9d60d23034b71ff3d8359434fb31.eot
diff --git a/fonts/prose-cb9f9d60d23034b71ff3d8359434fb31.woff b/fonts/prose-cb9f9d60d23034b71ff3d8359434fb31.woff
diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
   <link rel='stylesheet' href='./app.css'>
 </head>
 <body>
-  <div id='loader' class='loader round'></div>
+  <div id='loader' class='loader'></div>
   <div id='prose'></div>
   <script src='dist/prose.js'></script>
 </body>

diff --git a/src/prose/views/app.js b/src/prose/views/app.js
@@ -19,6 +19,8 @@ module.exports = Backbone.View.extend({
       'click a.cancel': 'cancelSave',
       'click a.delete': 'deleteFile',
       'click a.translate': 'translate',
+      'click a.mobile-menu': 'toggleMobileClass',
+      'click a.toggle.close': 'toggleMobileClass',
       'focus input.filepath': 'checkPlaceholder',
       'keypress input.filepath': 'saveFilePath'
     },
@@ -95,15 +97,22 @@ module.exports = Backbone.View.extend({
       // Fix this in re-factor, could be much tighter
       if (app.state.mode === 'tree') {
         $('#prose').toggleClass('open', true);
+        $('#prose').toggleClass('mobile', false);
       } else if (app.state.mode === '' && window.authenticated && app.state.user !== '') {
         $('#prose').toggleClass('open', true);
+        $('#prose').toggleClass('mobile', false);
       } else {
-        $('#prose').toggleClass('open', false);
+        $('#prose').toggleClass('open mobile', false);
       }
 
       return this;
     },
 
+    toggleMobileClass: function() {
+      $('#prose').toggleClass('mobile');
+      return false;
+    },
+
     documentTitle: function(title) {
       document.title = title + ' · Prose';
     },
@@ -176,11 +185,11 @@ module.exports = Backbone.View.extend({
       if ($(e.target, this.el).hasClass('active')) {
         $navItems.removeClass('active');
         $('.navigation .' + this.viewing, this.el).addClass('active');
-        $('#prose').toggleClass('open', false);
+        $('#prose').toggleClass('open mobile', false);
       } else {
         $navItems.removeClass('active');
         $(e.target, this.el).addClass('active');
-        $('#prose').toggleClass('open', true);
+        $('#prose').toggleClass('open mobile', true);
       }
 
       return false;
@@ -195,7 +204,7 @@ module.exports = Backbone.View.extend({
         $('.post-views .edit', this.el).addClass('active');
       }
 
-      $('#prose').toggleClass('open', false);
+      $('#prose').toggleClass('open mobile', false);
     },
 
     restoreFile: function(e) {

diff --git a/src/prose/views/profile.js b/src/prose/views/profile.js
@@ -21,7 +21,7 @@ module.exports = Backbone.View.extend({
       this.eventRegister.bind('remove', this.remove);
 
       var header = {
-          avatar: '<img src="' + data.user.avatar_url + '" width="40" height="40" alt="Avatar" />',
+          avatar: '<img class="round" src="' + data.user.avatar_url + '" width="40" height="40" alt="Avatar" />',
           parent: data.user.name || data.user.login,
           parentUrl: data.user.login,
           title: 'Explore Projects',

diff --git a/templates/app.html b/templates/app.html
@@ -3,32 +3,9 @@
   if (mode === 'edit' || mode === 'blob' || mode === 'new') editMode = true;
 %>
 
-<div class='prose-menu dropdown-menu'>
-  <div class='inner'>
-    <a href='/' class='icon branding dropdown-hover' data-link=true>Prose</a>
-    <ul class='dropdown'>
-      <li><a class='about' href='./#about'>About</a></li>
-      <li><a class='help' href='https://github.com/prose/prose'>Developers</a></li>
-      <li class='divider'></li>
-      <li><a href='#'>Prose v1.0.0</a></li>
-    </ul>
-  </div>
-</div>
-
-<div class='limiter'>
-  <div id='heading' class='heading clearfix'></div>
-</div>
-<div class='limiter'>
-  <div id='content' class='application content'></div>
-</div>
-
-<% if (!error) { %>
-  <div id='drawer' class='sidebar'></div>
-<% } %>
-
 <% if (!error) { %>
-  <div class='vert navigation<% if (editMode) { %> editing<% } %>'>
-    <ul class='project nav'>
+  <div class='vert clearfix navigation<% if (editMode) { %> editing<% } %>'>
+    <ul class='project nav clearfix'>
       <li>
         <a href='#' class='ico round repos <% if (!mode) { %>active<% } %>'>
           <span class='popup round arrow-right'>Explore Projects</span>
@@ -51,7 +28,7 @@
     </ul>
 
     <% if (editMode) { %>
-    <ul class='post-views nav'>
+    <ul class='post-views nav clearfix'>
       <li>
         <a href='#' class='ico round pencil edit' data-state='edit'>
           <span class='popup round arrow-right'>Edit</span>
@@ -82,7 +59,7 @@
     </ul>
     <% } %>
 
-    <ul class='auth nav'>
+    <ul class='auth nav clearfix'>
       <% if (window.authenticated) { %>
       <li>
         <a href='#' class='ico round switch logout'>
@@ -99,3 +76,26 @@
     </ul>
   </div>
 <% } %>
+
+<% if (!error) { %>
+  <div id='drawer' class='sidebar'></div>
+<% } %>
+
+<div class='limiter'>
+  <div id='heading' class='heading clearfix'></div>
+</div>
+<div class='limiter'>
+  <div id='content' class='application content'></div>
+</div>
+
+<div class='prose-menu dropdown-menu'>
+  <div class='inner clearfix'>
+    <a href='#' class='icon branding dropdown-hover' data-link=true>Prose</a>
+    <ul class='dropdown clearfix'>
+      <li><a class='about' href='./#about'>About</a></li>
+      <li><a class='help' href='https://github.com/prose/prose'>Developers</a></li>
+      <li class='divider'></li>
+      <li><a href='#'>Prose v1.0.0</a></li>
+    </ul>
+  </div>
+</div>
diff --git a/templates/directories.html b/templates/directories.html
@@ -5,8 +5,8 @@
     data-navigate='#<%= user %>/<%= repo %>/tree/<%= branch %><%= path %>'
     href='#<%= user %>/<%= repo %>/tree/<%= branch %><%= path %>'>
 
-    <span class='icon fl round folder'></span>
-    <span class='details fl'>
+    <span class='icon listing-icon round folder'></span>
+    <span class='details'>
       <h3 class='title'><%= name %></h3>
     </span>
   </a>

diff --git a/templates/files.html b/templates/files.html
@@ -3,14 +3,14 @@
     data-index='<%= index %>'>
 
   <% if (isBinary) { %>
-    <div class='fl icon round <%= extension %> <% if (isMedia) { %>media<% } %>'></div>
+    <div class='listing-icon icon round <%= extension %> <% if (isMedia) { %>media<% } %>'></div>
   <% } else { %>
-    <a href='#<%= user %>/<%= repo %>/edit/<%= branch %>/<%= path %>' class='fl'>
+    <a href='#<%= user %>/<%= repo %>/edit/<%= branch %>/<%= path %>' class='listing-icon'>
       <span class='icon round <%= extension %> <% if (isMedia) { %>media<% } %>'></span>
     </a>
   <% } %>
 
-  <div class='fl details'>
+  <div class='details'>
     <div class='actions fr clearfix'>
       <% if (!isBinary) { %>
         <a class='clearfix'

diff --git a/templates/heading.html b/templates/heading.html
@@ -1,6 +1,6 @@
 <% if (alterable) { %>
-  <a href='#' class='avatar save-action round fl'>
-    <span class='ico status'></span>
+  <a href='#' class='save-action round avatar'>
+    <span class='ico round status'></span>
 
     <% if (writable) { %>
       <span class='popup round arrow-left'>Ctrl&nbsp;+&nbsp;S</span>
@@ -23,9 +23,11 @@ <h4 class='parent-trail'><%= parentTrail %><% if (isPrivate) { %><span class='ic
   </div>
 
 <% } else { %>
-  <div class='avatar round fl'><%= avatar %></div>
+  <div class='avatar round'><%= avatar %></div>
   <div class='fl details'>
     <h4><a class='user' href='#<%= parentUrl %>'><%= parent %></a></h4>
     <h2><a class='repo' href='#<%= titleUrl %>'><%= title %></a></h2>
   </div>
+
+  <a href='#' class='mobile-menu toggle ico menu round'></a>
 <% } %>
diff --git a/templates/helpDialog.html b/templates/helpDialog.html
@@ -16,7 +16,7 @@
   <% }); %>
 </div>
 
-<div class='col prose small'>
+<div class='col col-last prose small'>
   <% _(help).each(function(mainMenu, index) { %>
     <% _(mainMenu.content).each(function(d, i) { %>
     <div class='help-content inner help-<%= _.formattedClass(d.menuName) %><% if (index === 0 && i === 0) { %> active<% } %>'>

diff --git a/templates/loading.html b/templates/loading.html
@@ -1,4 +1,4 @@
-<div class='loading clearfix'>
+<div class='loading round clearfix'>
   <div class='loading-icon'></div>
   <small><%= message %></small>
 </div>
diff --git a/templates/mediaDialog.html b/templates/mediaDialog.html
@@ -1,14 +1,5 @@
 <div class='inner clearfix'>
 
-  <% if (assetsDirectory) { %>
-    <div class='col fl'>
-      <label>Choose Existing</label>
-      <div class='media-listing'>
-        <ul id='media'></ul>
-      </div>
-    </div>
-  <% } %>
-
   <div <% if (assetsDirectory) { %>class='col fl'<% } %>>
     <label>Insert Image</label>
 
@@ -25,4 +16,11 @@
     <input type='text' name='alt' placeholder='Alt text (optional)' />
     <a href='#' class='button round insert' data-type='media'>Insert</a>
   </div>
+
+  <% if (assetsDirectory) { %>
+    <div class='col col-last fl media-listing'>
+      <label>Choose Existing</label>
+      <ul id='media'></ul>
+    </div>
+  <% } %>
 </div>
diff --git a/templates/posts.html b/templates/posts.html
@@ -7,7 +7,7 @@
   </div>
 </div>
 
-<div class='listing'>
+<div class='listings'>
   <% if (path.length && path !== jailed) { %>
     <div class='breadcrumb'>
       <a class='branch' href='#<%= [user, repo, "tree", branch].join("/") %>'>..</a>
@@ -20,5 +20,5 @@
     </div>
   <% } %>
 
-  <ul id='files'></ul>
+  <ul id='files' class='listing'></ul>
 </div>
diff --git a/templates/profile.html b/templates/profile.html
@@ -7,4 +7,6 @@
   </div>
 </div>
 
-<ul id='projects' class='projects listing'></ul>
+<div class='listings'>
+  <ul id='projects' class='projects listing'></ul>
+</div>
diff --git a/templates/projects.html b/templates/projects.html
@@ -3,7 +3,7 @@
     data-index='<%= index %>'>
 
     <a
-      class='fl'
+      class='listing-icon'
       data-user='<%= owner.login %>'
       data-repo='<%= name %>'
       href='#<%= owner.login %>/<%= name %>'>
@@ -22,7 +22,7 @@
       <% } %>
     </a>
 
-    <div class='details fl'>
+    <div class='details'>
       <div class='actions fr clearfix'>
         <a
           data-user='<%= owner.login %>'

diff --git a/templates/sidebarOrganizations.html b/templates/sidebarOrganizations.html
@@ -1,3 +1,5 @@
+<a href='#' class='toggle round ico close'></a>
+
 <% if (window.authenticated) { %>
   <div class='inner'>
     <h2 class='label'>Groups</h2>

diff --git a/templates/sidebarProject.html b/templates/sidebarProject.html
@@ -1,3 +1,5 @@
+<a href='#' class='toggle round ico close'></a>
+
 <div class='inner'>
   <% if (app.state.branches.length > 0) { %>
     <h2 class='label'>Switch Branch</h2>