Skip to content

GitLab

Commit 0e6f5640 authored by Robert Czechowski's avatar Robert Czechowski
Browse files

Template jwinf: Enhance mobile friendliness, recreate index page with bulma tiles

parent 3da8ac81
Pipeline #689 failed with stages
in 8 minutes and 32 seconds
Hide whitespace changes
Inline Side-by-side
static/lib/bulma/medal-bulma-0.7.5.css
View file @ 0e6f5640
......@@ -4157,6 +4157,69 @@ a.has-text-danger:hover, a.has-text-danger:focus {
.columns.is-variable.is-8-fullhd {
--columnGap: 2rem; } }
.tile {
align-items: stretch;
display: block;
flex-basis: 0;
flex-grow: 1;
flex-shrink: 1;
min-height: min-content; }
.tile.is-ancestor {
margin-left: -0.75rem;
margin-right: -0.75rem;
margin-top: -0.75rem; }
.tile.is-ancestor:last-child {
margin-bottom: -0.75rem; }
.tile.is-ancestor:not(:last-child) {
margin-bottom: 0.75rem; }
.tile.is-child {
margin: 0 !important; }
.tile.is-parent {
padding: 0.75rem; }
.tile.is-vertical {
flex-direction: column; }
.tile.is-vertical > .tile.is-child:not(:last-child) {
margin-bottom: 1.5rem !important; }
@media screen and (min-width: 769px), print {
.tile:not(.is-child) {
display: flex; }
.tile.is-1 {
flex: none;
width: 8.33333%; }
.tile.is-2 {
flex: none;
width: 16.66667%; }
.tile.is-3 {
flex: none;
width: 25%; }
.tile.is-4 {
flex: none;
width: 33.33333%; }
.tile.is-5 {
flex: none;
width: 41.66667%; }
.tile.is-6 {
flex: none;
width: 50%; }
.tile.is-7 {
flex: none;
width: 58.33333%; }
.tile.is-8 {
flex: none;
width: 66.66667%; }
.tile.is-9 {
flex: none;
width: 75%; }
.tile.is-10 {
flex: none;
width: 83.33333%; }
.tile.is-11 {
flex: none;
width: 91.66667%; }
.tile.is-12 {
flex: none;
width: 100%; } }
/* @import "sass/layout/_all" */
.footer {
background-color: #fafafa;
......
templates/jwinf/base.hbs
View file @ 0e6f5640
......@@ -17,13 +17,13 @@
</style>
</head>
<body style="background-color: {{#if server_message}}#fbebeb{{else}}white{{/if}};">
<div class="container">
<div class="container" style="padding: 1.5rem;">
<div class="columns">
<div class="column is-two-thirds">
<p>&nbsp;<p>
{{#if firstlogin }}
<img style="float:left; margin-right: 10px;" src="/static/images/klein.png">
{{else}}
{{else}}
<a href="/">
<img style="float:left; margin-right: 10px;" src="/static/images/klein.png">
</a>
......@@ -35,30 +35,30 @@
&nbsp;
{{#if logged_in}}
{{#if firstlogin }}{{else}}
<div class="columns alogin" style="margin-bottom: 0px;">
<div class="column is-three-fifths">
Eingeloggt als <em>{{ username }}</em>
{{#if firstname}}{{#if lastname}}
({{firstname}} {{lastname}})
{{/if}}{{/if}}
{{#if teacher}}
[Lehrer]
{{/if}}
<div class="columns" style="margin-bottom: 0px;">
<div class="column is-three-fifths">
Eingeloggt als <em>{{ username }}</em>
{{#if firstname}}{{#if lastname}}
({{firstname}} {{lastname}})
{{/if}}{{/if}}
{{#if teacher}}
[Lehrer]
{{/if}}
</div>
<div class="column"><a href="/logout" class="button is-small is-danger" type="submit">⨯ &nbsp; Logout</a></div>
</div>
<div class="column"><a href="/logout" class="button is-small is-danger" type="submit">⨯ &nbsp; Logout</a></div>
</div>
<div class="columns alogin">
<div class="column">
<a href="/profile" class="button is-info is-small">👤 &nbsp; Profil</a>
{{#if teacher}}
<a href="/group/" class="button is-warning is-small">⚙ &nbsp; Gruppenverwaltung</a>
<a href="/teacher" class="button is-primary is-small">👨‍🏫 &nbsp; Lehrer-Informationen</a>
{{/if}}
{{#if admin}}
<a href="/admin/" class="button is-warning is-small">⚙ &nbsp; Administration</a>
{{/if}}
<div class="columns">
<div class="column">
<a href="/profile" class="button is-info is-small">👤 &nbsp; Profil</a>
{{#if teacher}}
<a href="/group/" class="button is-warning is-small">⚙ &nbsp; Gruppenverwaltung</a>
<a href="/teacher" class="button is-primary is-small">👨‍🏫 &nbsp; Lehrer-Informationen</a>
{{/if}}
{{#if admin}}
<a href="/admin/" class="button is-warning is-small">⚙ &nbsp; Administration</a>
{{/if}}
</div>
</div>
</div>
{{/if}}
{{else}}
<!-- form action="/login" method="post">
......@@ -89,7 +89,7 @@
{{#if server_message}}
{{#if firstlogin }}{{else}}
<div class="columns alogin">
<div class="columns">
<div class="column is-8 is-offset-2">
<div class="notification is-danger">
{{{ server_message }}}
......@@ -98,7 +98,7 @@
</div>
{{/if}}
{{/if}}
{{~> page}}
</div>
<div style="margin-bottom:50px;"> &nbsp; </div>
......@@ -119,10 +119,10 @@
&nbsp; &nbsp; · &nbsp; &nbsp;
<a href="https://bwinf.de/impressum/">Impressum</a>
&nbsp; &nbsp; · &nbsp; &nbsp;
🖂 <a href="mailto:jwinf@bwinf.de">jwinf@bwinf.de</a>
<nobr>🖂 <a href="mailto:jwinf@bwinf.de">jwinf@bwinf.de</a></nobr>
{{#if teacher}}
&nbsp; &nbsp; · &nbsp; &nbsp;
☏ 0228 9762 6999
&nbsp; &nbsp; · &nbsp; &nbsp;
<nobr>☏ 0228 9762 6999</nobr>
{{/if}}
</p>
<!-- <p>Diese Wettbewerbsplattform ist freie Software.</p> -->
......
templates/jwinf/index.hbs
View file @ 0e6f5640
......@@ -14,50 +14,46 @@
<div class="columns">
<div class="column is-4 is-offset-2">
<a href="/contest/?filter=open">
<div class="notification" style="background-color:#e5fae5">
<h3 class="title is-4">Trainingsaufgaben</h3>
<h4 class="subtitle is-5">Zum Ausprobieren und Üben</h4>
<img src="/static/images/green.png" style="width:30%; margin:10px 35% 25px">
➙ Zu den Trainingsaufgaben …
</div>
</a>
</div>
<div class="column is-4 is-offset-0">
<a href="/contest/?filter=current">
<div class="notification" style="background-color:#e5f0f8">
<h3 class="title is-4">Aktuelle Wettbewerbe</h3>
<h4 class="subtitle is-5">Jugendwettbewerb Informatik</h4>
<img src="/static/images/white.png" style="width:30%; margin:10px 35% 25px">
➙ Zu den Wettbewerben …
</div>
</a>
</div>
</div>
<div class="columns">
<div class="column is-4 is-offset-2">
<a href="https://bwinf.de/jwinfportal">
<div class="notification">
<h3 class="title is-4">➚ Informationen</h3>
<img src="/static/images/logomittext.png" style="width:60%; margin: -25px 20% 25px;">
➚ Informationen zur Anmeldung und Teilnahme am Wettbewerb, Termine, Materialien und mehr …
</div>
</a>
</div>
<div class="column is-4 is-offset-0">
<a href="/contest/?filter=challenge">
<div class="notification" style="background-color: #d2222217">
<h3 class="title is-4">Herausforderungen</h3>
<h4 class="subtitle is-5">Mit Zeitbeschränkung</h4>
<img src="/static/images/gross.png" style="width:30%; margin: 0px 35% 37px;">
➙ Zu den Herausforderungen …
<div class="column is-8 is-offset-2">
<div class="tile is-ancestor">
<div class="tile is-vertical">
<div class="tile">
<div class="tile is-6 is-parent">
<a href="/contest/?filter=open" class="tile is-child notification" style="background-color:#e5fae5">
<h3 class="title is-4">Trainingsaufgaben</h3>
<h4 class="subtitle is-5">Zum Ausprobieren und Üben</h4>
<img src="/static/images/green.png" style="width:30%; margin:10px 35% 25px">
➙ Zu den Trainingsaufgaben …
</a>
</div>
<div class="tile is-parent is-6">
<a href="/contest/?filter=current" class="tile is-child notification" style="background-color:#e5f0f8">
<h3 class="title is-4">Aktuelle Wettbewerbe</h3>
<h4 class="subtitle is-5">Jugendwettbewerb Informatik</h4>
<img src="/static/images/white.png" style="width:30%; margin:10px 35% 25px">
➙ Zu den Wettbewerben …
</a>
</div>
</div>
<div class="tile">
<div class="tile is-6 is-parent">
<a href="https://bwinf.de/jwinfportal" class="tile is-child notification">
<h3 class="title is-4">➚ Informationen</h3>
<img src="/static/images/logomittext.png" style="width:60%; margin: -25px 20% 25px;">
➚ Informationen zur Anmeldung und Teilnahme am Wettbewerb, Termine, Materialien und mehr …
</a>
</div>
<div class="tile is-parent is-6">
<a href="/contest/?filter=challenge" class="tile is-child notification" style="background-color: #d2222217">
<h3 class="title is-4">Herausforderungen</h3>
<h4 class="subtitle is-5">Mit Zeitbeschränkung</h4>
<img src="/static/images/gross.png" style="width:30%; margin: 0px 35% 37px;">
➙ Zu den Herausforderungen …
</a>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment