Merge pull request #11 from hhu-propra2/development

n2o · web-flow · commit e625a4c04ca8 · 2020-03-04T13:41:12.000+01:00
Release v2.0.1
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -5,10 +5,12 @@ on:
     branches:
       - '*'
       - '!master'
+      - '!development'
   pull_request:
     branches:
       - '*'
       - '!master'
+      - '!development'
 
 jobs:
   build:
diff --git a/.github/workflows/heroku.yml b/.github/workflows/heroku.yml
@@ -3,7 +3,7 @@ name: Heroku Deployment
 on:
   push:
     branches:
-      - master
+      - development
 
 jobs:
   build:
diff --git a/build.gradle b/build.gradle
@@ -7,7 +7,7 @@ plugins {
 }
 
 group = 'mops'
-version = '2.0.0'
+version = '2.0.1'
 sourceCompatibility = '11'
 
 configurations {
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "title": "Mops - Styleguide",
   "name": "styleguide",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Styleguide for Mops",
   "main": "gulpfile.js",
   "scripts": {
@@ -11,7 +11,7 @@
     "type": "git",
     "url": "https://github.com/hhu-propra2/styleguide.git"
   },
-  "homepage": "http://mops.style",
+  "homepage": "https://mops.style",
   "license": "ISC",
   "dependencies": {
     "@popperjs/core": "^2.0.6",
diff --git a/src/main/resources/static/css/styles.scss b/src/main/resources/static/css/styles.scss
@@ -40,8 +40,9 @@ $transition-duration: 0.3s;
 
 body {
   .header.header-main:first-child {
-    position: sticky;
+    position: fixed;
     top: 0;
+    width: 100%;
     height: $header-main-height;
     padding: $header-main-padding-y $header-main-padding-x;
     display: flex;
@@ -312,8 +313,7 @@ body {
       width: $sidebar-width;
       transform: translateX(0);
       transition: transform $transition-duration ease-out;
-      overflow-x: hidden;
-      overflow-y: scroll;
+      overflow: hidden;
 
       @include large {
         transform: translateX(100%);
@@ -328,13 +328,17 @@ body {
         height: 100%;
         transition: transform $transition-duration ease-out;
         transform: translateX(0);
+        overflow: hidden;
 
         .navigation {
           width: $navigation-width;
           overflow-x: hidden;
+          overflow-y: auto;
 
           ul {
             list-style: none;
+            padding: 0;
+            margin: 0;
             padding-inline-start: 0;
             padding-inline-end: 0;
             margin-block-start: 0;
@@ -392,7 +396,7 @@ body {
   }
 
   > .main-wrapper {
-    padding-top: 1rem;
+    padding-top: calc(1rem + #{$header-main-height});
     padding-left: 1rem;
     padding-right: 1rem;
     padding-bottom: calc(1rem + #{$footer-main-height});
@@ -404,8 +408,9 @@ body {
   }
 
   footer.footer.footer-main {
-    position: sticky;
+    position: fixed;
     bottom: 0;
+    width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en"
-      th:replace="~{mopslayout :: html(name='Styleguide', headcontent=~{:: headcontent}, bodycontent=~{:: bodycontent})}"
+      th:replace="~{mopslayout :: html(name='Styleguide', headcontent=~{:: headcontent}, navigation=~{:: navigation}, bodycontent=~{:: bodycontent})}"
       xmlns:th="http://www.thymeleaf.org">
 <head>
   <meta charset="utf-8">
@@ -154,8 +154,8 @@ <h2 id="structure">Grundaufbau</h2>
     <li><code>headcontent</code> (Fragment mit Links, Scripts, Styles und ggf. anderen Angaben im <code>head</code> der
       Seite)
     </li>
-    <li><code>navigation (Fragment mit Links)</code></li>
-    <li><code>bodycontent (Fragment mit beliebigem Inhalt, der im <code>body</code> vorkommen kann)</code></li>
+    <li><code>navigation</code> (Fragment mit Links)</li>
+    <li><code>bodycontent</code> (Fragment mit beliebigem Inhalt, der im <code>body</code> vorkommen kann)</li>
   </ul>
   <p>
     Sämtliche Parameter sind optional. Es macht aber Sinn, manche (oder alle) zu setzen.
@@ -232,17 +232,15 @@ <h2 id="fragments">Fragmente</h2>
     einfach weggelassen werden.
   </p>
 
-  <h2 id="fragments">Account</h2>
+  <h2 id="account">Account</h2>
   <p>
-    Da wir mit Authentifizierung und Autorisierung arbeiten, sollte dem Benutzer die Möglichkeit gegeben werden, ein
-    sich an- und abzumelden,
-    sowie seine Daten einzusehen. Dies geschieht im Template mit einem DTO-Objekt. Alles was ihr tun müsst, ist in eurem
-    Projekt eine
-    Klasse Account anzulegen, die folgendermaßen aussieht:
+    Da wir mit Authentifizierung und Autorisierung arbeiten, sollte dem Benutzer die Möglichkeit gegeben werden, sich an- und abzumelden,
+    sowie seine Daten einzusehen. Dies geschieht im Template mit einem DTO. Alles was ihr tun müsst, ist in eurem
+    Projekt eine Klasse Account anzulegen, die folgendermaßen aussieht:
   </p>
   <pre>
       <code>
-class Account {
+public class Account {
     private final String name; // Name der angemeldeten Person
     private final String email; // E-Mail-Adresse
     private final String image; // Bild (kann für jeden null sein)

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ plugins {`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`group = 'mops'`
`10`		`-version = '2.0.0'`
	`10`	`+version = '2.0.1'`
`11`	`11`	`sourceCompatibility = '11'`
`12`	`12`
`13`	`13`	`configurations {`