Merge pull request #37 from Hackathon2020/better_styling

Better styling
Hackathon2020 · Mar 22, 2020 · e56a787 · e56a787
2 parents ca55857 + 9129fcd
commit e56a787
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 11 deletions.
diff --git a/project/flaskr/static/css/crossing.css b/project/flaskr/static/css/crossing.css
@@ -24,9 +24,24 @@
     width: 75%;
 }
 
-.dropdown-menu {
-    background-color: #6c757d;
+.btn{
+background: #E1E3E6;;
+}
+
+.dropdown-item{
+background: #E1E3E6;
+}
+.dropdown-menu{
+background: #E1E3E6;
 }
 .dropdown-menu.show {
     width: 25px;
 }
+
+.current-language{
+color:black;
+}
+
+.background-container{
+background: linear-gradient(180deg, #DADADA 0%, #F1F1F1 105.3%, #F1F1F1 105.31%, #FFFFFF 105.32%);
+}
diff --git a/project/flaskr/static/css/overview.css b/project/flaskr/static/css/overview.css
@@ -1,6 +1,13 @@
+.content-container{
+opacity: 0.6;
+border: 3px solid #000000;
+border-radius: 15px;
+height: 70vh;
+}
 
-
-
+.bg-light {
+    background-color: none !important;
+}
 
 p, hr {
     margin: 0 0 0 0;
@@ -41,3 +48,29 @@ button.toQr {
     margin:auto;
     display:block;
 }
+
+.content-container-final{
+height:60vh;
+opacity: 0.6;
+border: 3px solid #000000;
+border-radius: 15px;
+}
+.accept-formular{
+    background: #E1E3E6;
+    mix-blend-mode: normal;
+    opacity: 0.6;
+    border: 3px solid #000000;
+    border-radius: 15px;
+    height: 47px;
+    width: 100%;
+
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 22px;
+    text-indent: 15px;
+
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+}
diff --git a/project/flaskr/templates/app/crossing.html b/project/flaskr/templates/app/crossing.html
@@ -24,6 +24,7 @@
   </head>
 
   <body>
+    <div class="background-container">
     <div class="container">
         <nav class="navbar">
             <button id="backButton" onclick="location.href='language'"><i class="fas fa-arrow-left"></i></button>
@@ -113,6 +114,7 @@ <h2> Which Border do you want to cross? </h2>
                     </div>
                 </div>
             </div>
+        </div>
     </div>
 
     <!-- Optional JavaScript -->

diff --git a/project/flaskr/templates/app/language.html b/project/flaskr/templates/app/language.html
@@ -13,6 +13,7 @@
   </head>
 
   <body>
+    <div class="background-container">
     <div class="container">
        <nav class="navbar">
             <style> .hidden { visibility: hidden; } </style>
@@ -28,7 +29,7 @@
                 <button id="nextButton" onclick="location.href='crossing'"><i class="fas fa-arrow-right"></i></button>
             </div>
         </nav>
-    </div>
+
 
     <div class="container bordercross align-items-center">
 
@@ -90,8 +91,8 @@ <h2>Sprache</h2>
                     </div>
                 </div>
             </div>
-    </div>
-
+        </div>
+     </div>
     <!-- Optional JavaScript -->
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
     <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

diff --git a/project/flaskr/templates/questionnair/page.html b/project/flaskr/templates/questionnair/page.html
@@ -48,7 +48,7 @@
                 {% elif question.anwser_type == 'String' %}
                     {% set answer_id = 'answer_' + question.question_id | string %}
                         <div class="input-group mb-3">
-                            <input id={{answer_id}}  type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
+                            <input id={{answer_id}}  type="text" class="form-control" placeholder="...." aria-label="Default" aria-describedby="inputGroup-sizing-default">
                         </div>
                 {% elif question.anwser_type == 'Date' %}
 
@@ -75,14 +75,14 @@
         {% set overview_page = 'page_' + questions | length | string %}
         <div class="page" id={{overview_page}}>
         <!-- Navbar -->
-        <nav class="navbar navbar-light bg-light">
+        <nav class="navbar navbar-light">
             <div class="form-inline">
                 <!-- TODO: Variable -->
                 <h1>Überblick</h1>
             </div>
         </nav>
 
-        <div class="content-container jumbotron overflow-auto" style="height: 80vh;">
+        <div class="content-container jumbotron overflow-auto">
             {% for question in questions %}
             <div class="displayBlock" id="view_answer_{{question.question_id}}">
                 <hr>
@@ -102,7 +102,6 @@ <h1>Überblick</h1>
     <div id="{{last_page}}" class="page"><!--TODO set correct ID-->
         <div class="row qr-container justify-content-center align-items-center qrcode" id="qrcode">
         </div>
-
     </div> 
     </div> <!-- container -->
     </div> <!-- background-container-->