centered page content and adjusted nav bar m queries

This commit is contained in:
bill bittner 2017-10-11 11:38:20 -07:00
parent 3dfbac8d71
commit 0c1e8855f1
15 changed files with 100 additions and 122 deletions

View file

@ -3,6 +3,13 @@ html, body {
padding: 0; padding: 0;
height: 100%; height: 100%;
} }
.page-contents {
margin: 0px auto;
padding: 0px;
height: calc(100% - 5rem);
max-width: 1200px;
}
/* TEXT */ /* TEXT */
body, button, input, textarea, label, select, option { body, button, input, textarea, label, select, option {
@ -15,10 +22,6 @@ p {
padding-left: 0.3em; padding-left: 0.3em;
} }
.center-text {
text-align: center;
}
.url-text { .url-text {
margin:0px; margin:0px;
padding:0px; padding:0px;
@ -123,7 +126,7 @@ h3 {
} }
.row--full-height { .row--full-height {
height: calc(100% - 9rem); height: calc(100% - 4rem);
} }
.column { .column {

View file

@ -1,23 +1,6 @@
@media (max-width: 1000px) { @media (max-width: 1050px) {
.main {
float: none;
width: 100%;
margin-right: 0px;
padding-right: 0px;
border-right: 0px;
margin-bottom: 5px;
}
.sidebar {
border-top: 1px solid lightgray;
float: none;
width: 100%;
}
}
@media (max-width: 850px) {
.nav-bar-title, .nav-bar-subtitle { .nav-bar-title, .nav-bar-subtitle {
padding-bottom: 0px; padding-bottom: 0px;
} }
@ -38,6 +21,10 @@
.nav-bar { .nav-bar {
height: 8rem; height: 8rem;
} }
.page-contents {
height: calc(100% - 8rem);
}
} }
@media (max-width: 750px ) { @media (max-width: 750px ) {

View file

@ -1,4 +1,3 @@
{{> navBar}}
<div class="row row--full-height"> <div class="row row--full-height">
<div class="column column--5 column--med-10 align-content-top"> <div class="column column--5 column--med-10 align-content-top">
<div class="row row--short"> <div class="row row--short">

View file

@ -1,4 +1,3 @@
{{> navBar}}
<div class="row row--full-height"> <div class="row row--full-height">
<h2>{{this.channelName}}<span class="h2--secondary">:{{this.longChannelId}}</span></h2> <h2>{{this.channelName}}<span class="h2--secondary">:{{this.longChannelId}}</span></h2>
<p>Below is all the free content in this channel.</p> <p>Below is all the free content in this channel.</p>

View file

@ -1,4 +1,3 @@
{{> navBar}}
<div> <div>
<h3>404: Not Found</h3> <h3>404: Not Found</h3>
<p>That page does not exist. Return <a href="/">home</a>.</p> <p>That page does not exist. Return <a href="/">home</a>.</p>

View file

@ -1,4 +1,3 @@
{{> navBar}}
<div class="row row--full-height"> <div class="row row--full-height">
<div id="primary-dropzone-wrapper"> <div id="primary-dropzone-wrapper">
<div id="primary-dropzone" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" onclick="triggerFileChooser('siofu_input', event)"> <div id="primary-dropzone" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" onclick="triggerFileChooser('siofu_input', event)">

View file

@ -27,6 +27,9 @@
<script src="/assets/js/loginFunctions.js"></script> <script src="/assets/js/loginFunctions.js"></script>
<script src="/assets/js/createChannelFunctions.js"></script> <script src="/assets/js/createChannelFunctions.js"></script>
<script src="/assets/js/navBarFunctions.js"></script> <script src="/assets/js/navBarFunctions.js"></script>
{{{ body }}} {{> navBar}}
<div class="page-contents">
{{{ body }}}
</div>
</body> </body>
</html> </html>

View file

@ -22,7 +22,10 @@
<script src="/assets/js/authFunctions.js"></script> <script src="/assets/js/authFunctions.js"></script>
<script src="/assets/js/loginFunctions.js"></script> <script src="/assets/js/loginFunctions.js"></script>
<script src="/assets/js/navBarFunctions.js"></script> <script src="/assets/js/navBarFunctions.js"></script>
{{{ body }}} {{> navBar}}
<div class="page-contents">
{{{ body }}}
</div>
</body> </body>
</html> </html>

View file

@ -1,5 +1,3 @@
{{> navBar}}
<div class="row row--full-height"> <div class="row row--full-height">
<div class="column column--5 column--med-10 align-content-top"> <div class="column column--5 column--med-10 align-content-top">
<p>Log in to an existing channel:</p> <p>Log in to an existing channel:</p>

View file

@ -1,23 +1,22 @@
{{> navBar}} <div>
<div> <h2>New on Spee.ch</h2>
<h2>New on Spee.ch</h2> <p><i>The 25 most recent publishes on spee.ch</i></p>
<p><i>The 25 most recent publishes on spee.ch</i></p> {{#each newClaims}}
{{#each newClaims}} <div class="all-claims-item">
<div class="all-claims-item"> <a href="/{{this.claimId}}/{{this.name}}">
<a href="/{{this.claimId}}/{{this.name}}"> {{#ifConditional this.fileType '===' 'video/mp4'}}
{{#ifConditional this.fileType '===' 'video/mp4'}} <img class="all-claims-asset" src="/assets/img/video_thumb_default.png"/>
<img class="all-claims-asset" src="/assets/img/video_thumb_default.png"/> {{else}}
{{else}} <img class="all-claims-asset" src="/{{this.claimId}}/{{this.name}}.ext" />
<img class="all-claims-asset" src="/{{this.claimId}}/{{this.name}}.ext" /> {{/ifConditional}}
{{/ifConditional}} </a>
</a> <div class="all-claims-details">
<div class="all-claims-details"> <ul style="list-style-type:none">
<ul style="list-style-type:none"> <li><bold>{{this.name}}</bold></li>
<li><bold>{{this.name}}</bold></li> <li><i>Claim Id: {{this.claimId}}</i></li>
<li><i>Claim Id: {{this.claimId}}</i></li> <li><a href="/{{this.claimId}}/{{this.name}}">Link</a></li>
<li><a href="/{{this.claimId}}/{{this.name}}">Link</a></li> </ul>
</ul> </div>
</div> </div>
</div> {{/each}}
{{/each}} </div>
</div>

View file

@ -1,6 +1,5 @@
{{> navBar}} <div>
<div> <h3>No Claims</h3>
<h3>No Claims</h3> <p>There are no free assets on this channel.</p>
<p>There are no free assets on this channel.</p> <p><i>If you think this message is an error, contact us in the <a href="https://lbry.slack.com/" target="_blank">LBRY slack!</a></i></p>
<p><i>If you think this message is an error, contact us in the <a href="https://lbry.slack.com/" target="_blank">LBRY slack!</a></i></p> </div>
</div>

View file

@ -1,4 +1,3 @@
{{> navBar}}
<div class="row"> <div class="row">
<h3>No Claims</h3> <h3>No Claims</h3>
<p>There are no free assets at that claim. You should publish one at <a href="/">spee.ch</a>.</p> <p>There are no free assets at that claim. You should publish one at <a href="/">spee.ch</a>.</p>

View file

@ -1,4 +1,3 @@
{{> navBar}}
<div class="row"> <div class="row">
{{#each trendingAssets}} {{#each trendingAssets}}
{{> contentListItem}} {{> contentListItem}}

View file

@ -1,23 +1,20 @@
<div class="row row--full-height">
{{> navBar}} <div class="column column--10">
<div class="row row--full-height"> <!-- title -->
<div class="column column--10"> <span class="title-show">{{fileInfo.title}}</span>
<!-- title --> </div>
<span class="title-show">{{fileInfo.title}}</span> <div class="column column--5 column--med-10 align-content-top" >
</div> <!-- asset -->
<div class="column column--5 column--med-10 align-content-top" > <div class="row">
<!-- asset --> {{> asset}}
<div class="row"> </div>
{{> asset}} <div class="row row--wide">
</div> <span class="description-show">{{fileInfo.description}}</span>
<div class="row row--wide"> </div>
<span class="description-show">{{fileInfo.description}}</span> </div><div class="column column--5 column--med-10 align-content-top">
</div> <!-- details -->
</div><div class="column column--5 column--med-10 align-content-top"> <div class="row">
<!-- details --> {{> assetInfo}}
<div class="row"> </div>
{{> assetInfo}} </div>
</div> </div>
</div>
</div>

View file

@ -1,37 +1,32 @@
<div>
<div class="top-bar"> <h3>Site Statistics</h3>
{{> navBar}} <p>Serve: {{ totals.totalServe }}</p>
</div> <p>Publish: {{ totals.totalPublish }}</p>
<div> <p>Show: {{ totals.totalShow }}</p>
<h3>Site Statistics</h3> <p>Percent Success: {{ percentSuccess}}%</p>
<p>Serve: {{ totals.totalServe }}</p> <table>
<p>Publish: {{ totals.totalPublish }}</p> <tr>
<p>Show: {{ totals.totalShow }}</p> <th>action</th>
<p>Percent Success: {{ percentSuccess}}%</p> <th >url</th>
<table> <th class="">count</th>
<tr> <th class="">success</th>
<th>action</th> <th class="">failure</th>
<th >url</th> </tr>
<th class="center-text">count</th> {{#each records}}
<th class="center-text">success</th> <tr>
<th class="center-text">failure</th> <td>{{ this.action }}</td>
</tr> <td class="stats-table-url">{{ this.url }}</td>
{{#each records}} <td class="">{{ this.count }}</td>
<tr> <td class="">{{ this.success }}</td>
<td>{{ this.action }}</td> <td class="">{{ this.failure }}</td>
<td class="stats-table-url">{{ this.url }}</td> </tr>
<td class="center-text">{{ this.count }}</td> {{/each}}
<td class="center-text">{{ this.success }}</td> <tr>
<td class="center-text">{{ this.failure }}</td> <td></td>
</tr> <td></td>
{{/each}} <td class="">{{ totals.totalCount }}</td>
<tr> <td class="">{{ totals.totalSuccess }}</td>
<td></td> <td class="">{{ totals.totalFailure }}</td>
<td></td> </tr>
<td class="totals-row center-text">{{ totals.totalCount }}</td> </table>
<td class="totals-row center-text">{{ totals.totalSuccess }}</td> </div>
<td class="totals-row center-text">{{ totals.totalFailure }}</td>
</tr>
</table>
</div>