GitPrep
Login
Showing 2 changed files with 209 additions and 153 deletions
+68 -8
public/css/bootstrap.css
View
... ... 
@@ -1785,14 +1785,6 @@ button.close {
1785 1785 
   padding:10px 0;
1786 1786 
 }
1787 1787
1788 
-.commit-date {
1789 
-  color: #767676;
1790 
-}
1791 
-
1792 
-.commit-date i {
1793 
-  margin-right:15px;
1794 
-}
1795 
-
1796 1788 
 .commits-date-container li:first-child {
1797 1789 
   border-top: 1px solid #e5e5e5;
1798 1790 
 }
... ... 
@@ -1805,6 +1797,14 @@ button.close {
1805 1797 
   overflow:hidden;
1806 1798 
 }
1807 1799
1800 
+.commit-date {
1801 
+  color: #767676;
1802 
+}
1803 
+
1804 
+.commit-date i {
1805 
+  margin-right:15px;
1806 
+}
1807 
+
1808 1808 
 .commit-left {
1809 1809 
   float:left;
1810 1810 
   width:70%;
... ... 
@@ -2663,3 +2663,63 @@ button.close {
2663 2663 
   padding-top:40px;
2664 2664 
   padding-bottom:40px;
2665 2665 
 }
2666 
+
2667 
+.compare-select {
2668 
+  padding:12px 10px;
2669 
+  margin-bottom:5px;
2670 
+  position:relative;
2671 
+  border:1px solid #d8d8d8;
2672 
+  border-radius: 3px;
2673 
+  background-color: #fafafa;
2674 
+}
2675 
+
2676 
+.compare-header {
2677 
+  border:1px solid #d8d8d8;
2678 
+  overflow:hidden;
2679 
+  border-radius: 3px;
2680 
+  padding:10px;
2681 
+  margin-top:10px;
2682 
+}
2683 
+
2684 
+.compare-header li {
2685 
+  width:25%;
2686 
+  float:left;
2687 
+  text-align:center;
2688 
+}
2689 
+.compare-header li span {
2690 
+  color: #767676;
2691 
+}
2692 
+.compare-commits-date-container {
2693 
+  border-left:#f3f3f3 2px solid;
2694 
+  margin:3px 6px;
2695 
+  padding:10px 0;
2696 
+}
2697 
+
2698 
+.compare-commits-date-container li:first-child {
2699 
+}
2700 
+
2701 
+.compare-commits-date-container li {
2702 
+  margin-left:20px;
2703 
+  overflow:hidden;
2704 
+}
2705 
+
2706 
+.compare-commits-author {
2707 
+  width:30%;
2708 
+  float:left;
2709 
+  font-weight:bold;
2710 
+  font-size:90%;
2711 
+}
2712 
+
2713 
+.compare-commits-commit-title {
2714 
+  width:50%;
2715 
+  float:left;
2716 
+}
2717 
+
2718 
+.compare-commits-commit-id {
2719 
+  width:20%;
2720 
+  float:left;
2721 
+  text-align:right;
2722 
+}
2723 
+.compare-commits-commit-id a {
2724 
+  color:#767676;
2725 
+}
+141 -145
templates/compare.html.ep
View
... ... 
@@ -40,93 +40,89 @@
40 40 
   my $branches = $git->branches($user, $project);
41 41 
   @$branches = sort { $a->{commit}{age} <=> $b->{commit}{age} } @$branches;
42 42
43 
-  # Global variables
44 
-  stash(
45 
-    id => $end_commit->{id},
46 
-    from_id => $start_commit->{id},
47 
-    rev => $end_commit->{id},
48 
-    from_rev => $start_commit->{id},
49 
-  );
43 
+  # Variables
44 
+  stash id => $end_commit->{id};
45 
+  stash from_id => $start_commit->{id};
46 
+  stash rev => $end_commit->{id};
47 
+  stash from_rev => $start_commit->{id};
48 
+
49 
+  layout 'common', title => "Comparing $rev1...$rev2 \x{30fb} $user/$project";
50 50 
 %>
51 51
52 
-% layout 'common', title => "Comparing $rev1...$rev2 \x{30fb} $user/$project";
53 52
54 
-  %= javascript begin
55 
-    $(document).ready(function () {
56 
-
57 
-      // Change base branch
58 
-      $('#base-branch-btn').on('click', function () {
59 
-        $('#base-branch-popup')
60 
-          .css('display', 'block')
61 
-          .css('top', '40px')
62 
-          .css('left', '10px')
63 
-        ;
64 
-      });
65 
-      $('#base-branch-close').on('click', function () {
66 
-        $('#base-branch-popup').css('display', 'none');
67 
-      });
68 
-      $('[name=base-branch]').on('keypress', function (e) {
69 
-        // Enter
70 
-        if (e.which == 13) {
71 
-          location.href = '<%= url_for("/$user/$project/compare/") %>' + $(this).val() + '...<%= $rev %>';
72 
-        }
73 
-      });
53 
+%= javascript begin
54 
+  $(document).ready(function () {
55 
+
56 
+    // Change base branch
57 
+    $('#base-branch-btn').on('click', function () {
58 
+      $('#base-branch-popup')
59 
+        .css('display', 'block')
60 
+        .css('top', '40px')
61 
+        .css('left', '10px')
62 
+      ;
63 
+    });
64 
+    $('#base-branch-close').on('click', function () {
65 
+      $('#base-branch-popup').css('display', 'none');
66 
+    });
67 
+    $('[name=base-branch]').on('keypress', function (e) {
68 
+      // Enter
69 
+      if (e.which == 13) {
70 
+        location.href = '<%= url_for("/$user/$project/compare/") %>' + $(this).val() + '...<%= $rev %>';
71 
+      }
72 
+    });
74 73
75 
-      // Change compare branch
76 
-      $('#compare-branch-btn').on('click', function () {
77 
-        $('#compare-branch-popup')
78 
-          .css('display', 'block')
79 
-          .css('top', '40px')
80 
-          .css('left', '96px')
81 
-        ;
82 
-      });
83 
-      $('#compare-branch-close').on('click', function () {
84 
-        $('#compare-branch-popup').css('display', 'none');
85 
-      });
86 
-      $('[name=compare-branch]').on('keypress', function (e) {
87 
-        // Enter
88 
-        if (e.which == 13) {
89 
-          location.href = '<%= url_for("/$user/$project/compare/") %>' + '<%= $from_rev %>...' + $(this).val();
90 
-        }
91 
-      });
74 
+    // Change compare branch
75 
+    $('#compare-branch-btn').on('click', function () {
76 
+      $('#compare-branch-popup')
77 
+        .css('display', 'block')
78 
+        .css('top', '40px')
79 
+        .css('left', '96px')
80 
+      ;
81 
+    });
82 
+    $('#compare-branch-close').on('click', function () {
83 
+      $('#compare-branch-popup').css('display', 'none');
84 
+    });
85 
+    $('[name=compare-branch]').on('keypress', function (e) {
86 
+      // Enter
87 
+      if (e.which == 13) {
88 
+        location.href = '<%= url_for("/$user/$project/compare/") %>' + '<%= $from_rev %>...' + $(this).val();
89 
+      }
92 90 
     });
93 
-  % end
91 
+  });
92 
+% end
94 93
95 
-  %= include '/include/header';
94 
+%= include '/include/header';
96 95
97 
-  <div class="container">
98 
-    <h2>Compare View</h2>
99 
-    <div class="well" style="padding:9px 10px 9px 10px;margin-bottom:5px;position:relative">
100 
-      <div class="row">
101 
-        <div class="span8">
102 
-          <button id="base-branch-btn" class="btn" style="padding:2px 10px">
103 
-            <%= $from_rev %>
104 
-          </button>
105 
-          ...
106 
-          <button id="compare-branch-btn" class="btn" style="padding:2px 10px">
107 
-            <%= $rev %>
108 
-          </button>
109 
-        </div>
110 
-        <div class="text-right">
111 
-          <a href="<%= url_for("/$user/$project/compare/$rev...$from_rev") %>" class="btn" style="padding:2px 10px">Switch base branch</a>
112 
-        </div>
96 
+<div class="container">
97 
+  <div class="topic1">Compare View</div>
98 
+  <div class="compare-select">
99 
+    <div>
100 
+      <div>
101 
+        <button id="base-branch-btn" class="btn btn-small">
102 
+          <span>base:</span><b> <%= $from_rev %></b><i class="icon-arrow-down"></i>
103 
+        </button>
104 
+        ...
105 
+        <button id="compare-branch-btn" class="btn btn-small">
106 
+          <span>compare:</span> <b><%= $rev %></b><i class="icon-arrow-down"></i>
107 
+        </button>
113 108 
       </div>
109 
+    </div>
114 110
115 
-      <div id="base-branch-popup" style="display:none;width:330px;position:absolute">
116 
-        <div class="radius-top border-gray" style="background:#E6E6FA;padding:10px">
117 
-          <div class="row">
118 
-            <div class="span3">
119 
-              <b>Choose a base branch</b>
120 
-            </div>
121 
-            <div class="text-right">
122 
-              <i id="base-branch-close" class="icon-remove-circle"></i>
123 
-            </div>
111 
+    <div id="base-branch-popup" style="display:none;width:330px;position:absolute">
112 
+      <div class="radius-top border-gray" style="background:#E6E6FA;padding:10px">
113 
+        <div style="overflow:hidden">
114 
+          <div style="float:left;width:90%;">
115 
+            <b>Choose a base branch</b>
116 
+          </div>
117 
+          <div style="float:left:width:10%;text-align:right;">
118 
+            <i id="base-branch-close" class="icon-remove-circle"></i>
124 119 
           </div>
125 120 
         </div>
126 
-        <div class="border-gray" style="background:#F5F5F5;border-top:none;border-bottom:none;text-align:center;padding:10px 0">
127 
-          %= text_field 'base-branch', style => 'margin-bottom:0;width:270px', placeholder => 'Branch, tag, commit, or history marker';
128 
-        </div>
129 
-        <div style="background:white;max-height:500px;overflow:auto;">
121 
+      </div>
122 
+      <div class="border-gray" style="background:#F5F5F5;border-top:none;border-bottom:none;text-align:center;padding:10px 0">
123 
+        %= text_field 'base-branch', style => 'margin-bottom:0;width:270px', placeholder => 'Branch, tag, commit, or history marker';
124 
+      </div>
125 
+      <div style="background:white;max-height:500px;overflow:auto;">
130 126 
         <ul class="nav nav-tabs nav-stacked">
131 127 
           % for (my $i = 0; $i < @$branches; $i++) {
132 128 
             % my $branch = $branches->[$i];
... ... 
@@ -137,89 +133,89 @@
137 133 
               </li>
138 134 
           % }
139 135 
         </ul>
140 
-        </div>
141 136 
       </div>
137 
+    </div>
142 138
143 
-      <div id="compare-branch-popup" style="display:none;width:330px;position:absolute">
144 
-        <div class="radius-top border-gray" style="background:#E6E6FA;padding:10px">
145 
-          <div class="row">
146 
-            <div class="span3">
147 
-              <b>Choose a compare branch</b>
148 
-            </div>
149 
-            <div class="text-right">
150 
-              <i id="compare-branch-close" class="icon-remove-circle"></i>
151 
-            </div>
139 
+    <div id="compare-branch-popup" style="display:none;width:330px;position:absolute">
140 
+      <div class="radius-top border-gray" style="background:#E6E6FA;padding:10px">
141 
+        <div style="overflow:hidden">
142 
+          <div style="float:left;width:90%;">
143 
+            <b>Choose a compare branch</b>
144 
+          </div>
145 
+          <div style="float:left:width:10%;text-align:right;">
146 
+            <i id="compare-branch-close" class="icon-remove-circle"></i>
152 147 
           </div>
153 
-        </div>
154 
-        <div class="border-gray" style="background:#F5F5F5;border-top:none;border-bottom:none;text-align:center;padding:10px 0">
155 
-          %= text_field 'compare-branch', style => 'margin-bottom:0;width:270px', placeholder => 'Branch, tag, commit, or history marker';
156 
-        </div>
157 
-        <div style="background:white;max-height:500px;overflow:auto;">
158 
-        <ul class="nav nav-tabs nav-stacked">
159 
-          % for (my $i = 0; $i < @$branches; $i++) {
160 
-            % my $branch = $branches->[$i];
161 
-              <li>
162 
-                <a style="border-top-left-radius:0px;border-top-right-radius:0px;" href="<%= url_for("/$user/$project/compare/$from_rev...$branch->{name}") %>">
163 
-                  <%= $branch->{name} %>
164 
-                </a>
165 
-              </li>
166 
-          % }
167 
-        </ul>
168 148 
         </div>
169 149 
       </div>
170 
-
150 
+      <div class="border-gray" style="background:#F5F5F5;border-top:none;border-bottom:none;text-align:center;padding:10px 0">
151 
+        %= text_field 'compare-branch', style => 'margin-bottom:0;width:270px', placeholder => 'Branch, tag, commit, or history marker';
152 
+      </div>
153 
+      <div style="background:white;max-height:500px;overflow:auto;">
154 
+      <ul class="nav nav-tabs nav-stacked">
155 
+        % for (my $i = 0; $i < @$branches; $i++) {
156 
+          % my $branch = $branches->[$i];
157 
+            <li>
158 
+              <a style="border-top-left-radius:0px;border-top-right-radius:0px;" href="<%= url_for("/$user/$project/compare/$from_rev...$branch->{name}") %>">
159 
+                <%= $branch->{name} %>
160 
+              </a>
161 
+            </li>
162 
+        % }
163 
+      </ul>
164 
+      </div>
171 165 
     </div>
166 
+  </div>
172 167
173 
-    <div style="margin-bottom:20px">From here you can compare two points in history. You can even compare tag names and commits.</div>
168 
+  % if (keys %$commits_date) {
169 
+    <ul class="compare-header">
170 
+      <li>
171 
+        <b><%= @$commits %></b> <span>commit</span>
172 
+      </li>
173 
+      <li>
174 
+        <b><%= $authors_count %></b> <span>contributor</span>
175 
+      </li>
176 
+      <li>
177 
+
178 
+      </li>
179 
+      <li>
180 
+
181 
+      </li>
182 
+    </ul>
174 183
175 
-    <hr style="margin-top:5px">
176 
-
177 
-    % if (keys %$commits_date) {
178 
-
179 
-      <div>
180 
-        Showing <%= @$commits %> commits by <%= $authors_count %> author.
181 
-      </div>
182 
-
184 
+    <div class="commits">
183 185 
       % for my $date (reverse sort keys %$commits_date) {
184 186 
         % my $commits = $commits_date->{$date};
185 187
186 
-        <div class="bk-gray-light border-gray" style="padding:5px;">
187 
-          <%= $date %>
188 
+        <div class="commit-date">
189 
+          <i class="icon-off"></i><span>Commits on <%= $date %></span>
188 190 
         </div>
189 191
190 
-        <div style="margin-bottom:20px">
192 
+        <ul class="compare-commits-date-container">
191 193 
           % for my $commit (sort {$b->{author_epoch} <=> $a->{author_epoch}} @$commits) {
192 
-            <div class="border-gray" style="padding:5px;border-top:none">
193 
-              <div class="row">
194 
-                <div class="span2">
195 
-                  <span title="<%= $commit->{author_email} %>"><%= $commit->{author_name} %></span>
196 
-                </div>
197 
-                <div class="span7">
198 
-                  <a style="color:#333" href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
199 
-                    <%= $commit->{title_short} %>
200 
-                  </a>
201 
-                </div>
202 
-                <div class="span2 text-right" style="margin-left:80px">
203 
-                  <a href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
204 
-                    <%= substr($commit->{id}, 0, 7) %>
205 
-                  </a>
206 
-                </div>
194 
+            <li>
195 
+              <div class="compare-commits-author">
196 
+                <span title="<%= $commit->{author_email} %>"><%= $commit->{author_name} %></span>
207 197 
               </div>
208 
-            </div>
198 
+              <div class="compare-commits-commit-title">
199 
+                <a style="color:#333" href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
200 
+                  <%= $commit->{title_short} %>
201 
+                </a>
202 
+              </div>
203 
+              <div class="compare-commits-commit-id">
204 
+                <a href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
205 
+                  <%= substr($commit->{id}, 0, 7) %>
206 
+                </a>
207 
+              </div>
208 
+            </li>
209 209 
           % }
210 
-        </div>
210 
+        </ul>
211 211 
       % }
212 
-
213 
-      %= include '/include/commit_body';
214 
-    % } else {
215 
-      <div class="well" style="padding:35px">
216 
-        <div class="text-center" style="margin-bottom:15px"><b>There isn't anything to compare.</b></div>
217 
-
218 
-        <div class="text-center muted">
219 
-          <b><%= $from_rev %></b> is up to date with all commits from <b><%= $rev %></b>.
220 
-          Try <a href="<%= url_for("/$user/$project/compare/$rev...$from_rev") %>">switching the base</a> for your comparison.
221 
-        </div>
222 
-      </div>
223 
-    % }
224 
-  </div>
225 
-  %= include '/include/footer';
212 
+    </div>
213 
+
214 
+    %= include '/include/commit_body';
215 
+  % } else {
216 
+    <div>
217 
+      <b>There isn't anything to compare.</b>
218 
+    </div>
219 
+  % }
220 
+</div>
221 
+%= include '/include/footer';
Gitprep Version v2.6_dev build on Mojolicious