Skip to content

GitLab

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

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
        Showing with 131 additions and 72 deletions
        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