Switch to full-width view, fix display on small screens

This commit is contained in:
Filip Gralinski 2018-09-08 14:17:40 +02:00
parent 858f494047
commit e20e8dfa63
5 changed files with 29 additions and 12 deletions

13
static/css/extra.css Normal file
View File

@ -0,0 +1,13 @@
body {
padding-top: 80px;
}
.navbar-header {
position: relative;
}
.navbar-toggle {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

View File

@ -1,16 +1,16 @@
<div .row>
<div .col-md-2 role="complementary">
<div .col-md-1 role="complementary" style="z-index:1;">
<ul class="nav nav-pills nav-stacked navbar-left">
<li role="presentation" class="active"><a href="@{ShowChallengeR (challengeName challenge)}">Challenge</a>
<li role="presentation"><a href="@{ChallengeReadmeR (challengeName challenge)}">Readme</a>
<li role="presentation"><a href="@{ChallengeHowToR (challengeName challenge)}">How To</a>
$if isJust maybeUser
<li role="presentation"><a href="@{ChallengeSubmissionR (challengeName challenge)}">Submit</a>
<li role="presentation"><a href="@{ChallengeMySubmissionsR (challengeName challenge)}">My Submissions</a>
<li role="presentation"><a href="@{ChallengeAllSubmissionsR (challengeName challenge)}">All Submissions</a>
<li role="presentation"><a href="@{ChallengeMySubmissionsR (challengeName challenge)}">My entries</a>
<li role="presentation"><a href="@{ChallengeAllSubmissionsR (challengeName challenge)}">All entries</a>
<li role="presentation"><a href="@{ChallengeDiscussionR (challengeName challenge)}">Discussion</a>
<div .col-md-10 role="main">
<div .col-md-11 role="main">
<div class="panel panel-default">
<div class="panel-body">
$if withHeader

View File

@ -15,6 +15,7 @@ $newline never
<!--datatables, including JQuery-->
<link rel="stylesheet" type="text/css" href="/static/css/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="/static/css/c3.min.css"/>
<link rel="stylesheet" type="text/css" href="/static/css/extra.css"/>
<script type="text/javascript" src="/static/js/datatables.min.js">
<script type="text/javascript" src="/static/js/datatables-extended.js">
@ -37,14 +38,14 @@ $newline never
<script>
document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/,'js');
<body style="padding-top: 100px">
<div class="container">
<body>
<div class="container-fluid">
<header>
<div id="main" role="main">
^{pageBody pc}
<footer class="footer" style="padding-top: 30px">
<div class="container">
<div class="container-fluid">
<p class="text-muted">#{appCopyright $ appSettings master}
$maybe analytics <- appAnalytics $ appSettings master

View File

@ -1,13 +1,16 @@
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar">
<span class="icon-bar">
<span class="icon-bar">
<a class="navbar-brand" href="@{HomeR}">Gonito.net
$maybe location <- appLocation $ appSettings master
$if location /= ""
\@#{location}
$maybe user <- maybeUser
<ul class="nav navbar-nav">
<ul class="nav navbar-nav navbar-collapse collapse">
<li class="dropdown">
<a id="about" href="#" class="dropdown-toggle" data-toggle="dropdown">_{MsgAbout}<span class="caret"></span>
<ul class="dropdown-menu">
@ -24,7 +27,7 @@
<li><a href="@{CreateResetLinkR}">_{MsgCreateResetLink}</a>
<li><a href="@{ExtraPointsR}">_{MsgAddExtraPoints}</a>
<ul class="nav navbar-nav navbar-right">
<ul class="nav navbar-nav navbar-collapse collapse navbar-right">
<li class="dropdown">
<a href="@{AuthR LoginR}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">#{userIdent $ entityVal user}<span class="caret"></span>
<ul class="dropdown-menu">

View File

@ -1,4 +1,4 @@
<div class="container">
<div class="container-fluid">
<div class="jumbotron">
<h1>Welcome to Gonito.net
$maybe location <- appLocation $ appSettings master