Merge pull request #2 from julianaito/master

More responsive design, make spacing consistent
marcespie · Jan 29, 2021 · ed2cee6 · ed2cee6
2 parents c208be5 + e1893ff
commit ed2cee6
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 37 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -3,63 +3,62 @@ margin: 0;
 padding: 0;
 border: 0;
 background-color: #ddd;
-font-family: "Lucida Grande", "Bitstream Vera Sans", "Verdana";
-font-size: 13px;
+font-family: sans-serif;
 color: #333;
 }
 
 #content {
 background-color: white;
-border: 40px solid #aaa;
-border-left: 20px solid #aaa;
-padding-left: 20px;
+border: 1em solid #aaa;
+padding: 1em;
 background-image: url("/images/openbsd-logo.gif");
 background-repeat: no-repeat;
 background-position: top right;
 }
 
 .three ul {
 -moz-column-count: 3;
+-moz-column-width: 10em;
 -webkit-column-count: 3;
+-webkit-column-width: 10em;
 column-count: 3;
+column-width: 10em;
 list-style: none;
+padding: 0;
 }
 
 .smaller ul {
 list-style: none;
-font-size: 10px;
-font-family: courier;
+font-size: 90%;
+font-family: monospace;
+padding: 0;
 }
 
 h1 {
-font-size: 28px;
 color: #f00;
 background-color: #eee;
 border-width: 0;
 border-bottom: 1px;
 border-left: 1px;
-padding-left: 1ex;
-padding-bottom: 0.5ex;
+padding-left: 0.5em;
+padding-bottom: 0.25em;
 border-color: #880;
 border-style: solid;
 width: 40%;
 }
 
 h2 {
-font-size: 20px;
 font-style: oblique;
 color: #555;
 border-width: 0;
 border-bottom: 1px;
-margin-left: 1ex;
-padding-bottom: 0.5ex;
+padding-bottom: 0.5em;
 border-color: #880;
 border-style: solid;
 }
 
-h3 {
+h3, h3 > a {
 margin-left: -5px;
-font-size: 15px;
 font-style: oblique;
 color: #00e;
 border-bottom: 0px;
@@ -70,25 +69,55 @@ margin-bottom: 0px;
 width: 70%;
 }
 
-a  {color: #03c}
+a  {
+color: #03c;
+}
 a:hover {
 background-color: #03c;
 color: white;
 text-decoration: none;
 }
 
 #back a {
-font-size: 7px;
 padding: 0px;
 border: 0px;
 margin: 0px;
 }
 
-form {
-padding: 10px;
+#search_form {
 background-color: #eee;
-border: 1px;
-width: 60%;
+margin-top: 1em;
+padding: 1em;
+display: flex;
+flex-direction: column;
+}
+
+#search_form div {
+display: inline-block;
+margin-top: 0.5em;
+}
+
+#search_form div > label {
+display: inline-block;
+width: 5em;
+text-align: center;
+}
+
+#search_form legend {
+font-weight: bold;
+font-size: 110%;
+}
+
+#search_form button {
+display: block;
+padding: .1em;
+width: 10em;
+margin: .5em auto;
+font-weight: bold;
+}
+
+pre {
+white-space: pre-wrap;
 }
 
 #test-depends-list, #reverse-depends-list, #files-list {

diff --git a/views/layouts/main.tt b/views/layouts/main.tt
@@ -1,33 +1,52 @@
 <!doctype html>
 <html lang=en>
+<head>
 <meta charset="<% settings.charset %>">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title><% title %></title>
 <link rel="stylesheet" href="//<% request.host %>/css/style.css">
 
 <script src="//<% request.host %>/javascripts/jquery.js"></script>
-
+</head>
+<body>
 <div id="content">
 <% content %>
+<div id="search_form" class="search_form">
 <form name="Search" action="/search">
 <fieldset>
 <legend>Search</legend>
-<table>
-<tr>
-<td>File<td><input type="text" name="file" value="<% params.file %>">
-<td>Descr<td><input type="text" name="descr" value="<% params.descr %>">
-<tr>
-<td>Path<td><input type="text" name="path" value="<% params.path %>">
-<td>Name<td><input type="text" name="pkgname" value="<% params.pkgname %>">
-<tr>
-<td>Category<td><input type="text" name="category" value="<% params.category %>">
-<td>Maintainer<td><input type="text" name="maintainer" value="<% params.maintainer %>">
-<tr>
-<td><td><input type="submit" value="Search!">
-</table>
+<div>
+<label for="file">File</label>
+<input type="text" name="file" id="file" value="<% params.file %>">
+</div>
+<div>
+<label for="descr">Descr</label>
+<input type="text" name="descr" id="descr" value="<% params.descr %>">
+</div>
+<div>
+<label for="path">Path</label>
+<input type="text" name="path" id="path" value="<% params.path %>">
+</div>
+<div>
+<label for="pkgname">Name</label>
+<input type="text" name="pkgname" id="pkgname" value="<% params.pkgname %>">
+</div>
+<div>
+<label for="category">Category</label>
+<input type="text" name="category" id="category" value="<% params.category %>">
+</div>
+<div>
+<label for="maintainer">Maintainer</label>
+<input type="text" name="maintainer" id="maintainer" value="<% params.maintainer %>">
+</div>
+<button type="submit">Search!</button>
 </fieldset>
 </form>
 </div>
+</div>
 <div id="footer">
 <a href="/path/databases/ports-readmes-dancer">Ports Readmes <% version %></a>, created on <% creation_date %>, powered by <a href="http://perldancer.org/">Dancer</a> <% dancer_version %>
 </div>
 <script type="text/javascript" src="//<% request.host %>/javascripts/script.js"></script>
+</body>
+</html>
diff --git a/views/port.tt b/views/port.tt
@@ -22,43 +22,55 @@ No homepage
 <% END %>
 
 <h3>Maintainer</h3>
-<% maintainer | html %>
+<p><% maintainer | html %></p>
 <% IF permit %>
 <h3>Distribution forbidden on ftp</h3>
+<p>
 <% permit | html %>
+</p>
 <% END %>
 <% IF multi %>
 <h3>Multi-packages</h3>
+<p>
 <% FOREACH m IN multi %>
 <a href="<% m.url | url %>"><% m.name | html %></a>
 <% END %>
+</p>
 <% END %>
 <% IF only_for %>
 <h3>Only for arches</h3>
+<p>
 <% FOREACH a IN only_for %>
 <% a | html %>
 <% END %>
+</p>
 <% END %>
 <% IF not_for %>
 <h3>Not for arches</h3>
+<p>
 <% FOREACH a IN not_for %>
 <% a | html %>
 <% END %>
+</p>
 <% END %>
 <% IF broken %>
 <h3>Broken</h3>
 <% FOREACH b IN broken %>
+<p>
 <% IF b.arch %>
 on <% b.arch | html %>: 
 <% END %>
 <% b.text | html %>
+</p>
 <% END %>
 <% END %>
 
 <h3>Categories</h3>
+<p>
 <% FOREACH c IN category %>
 <a href="<% c.url | url %>"><% c.name | html %></a>
 <% END %>
+</p>
 
 <%IF libdepends %>
 <h3>Library dependencies</h3>
@@ -91,7 +103,7 @@ on <% b.arch | html %>:
 </div>
 <% END %>
 <%IF testdepends %>
-<h3><a id="test_depends_link">Test dependencies</a></h3>
+<h3><a href="#" id="test_depends_link">Test dependencies</a></h3>
 <div id="test-depends-list" class="three">
 <ul>
 <% FOREACH d IN testdepends %>