navigation menu & colors

marktplatz/forms.py

@@ -43,7 +43,7 @@ class textSearchForm(forms.Form):
                Div('searchText',  css_class='col-sm-6 col-6'),
                Div(
                    ButtonHolder(
-                       Submit('submit', 'Suche', css_class='border-thin border-dark rounded-0 mybtn')
+                       Submit('submit', 'Suche', css_class='border-thin border-dark mybtn')
                    ),
                css_class='col-sm-6 col-6'),
                css_class='form-row  row'),

marktplatz/static/css/styles.css

@@ -76,14 +76,15 @@ src: local('Bariol Bold Italic'), url('Bariol/bariol_bold_italic-webfont.woff')
 
 }
 
-/*.card-text {
-    @include media-breakpoint-only(lg) {
-      column-count: 4;
-    }
-    @include media-breakpoint-only(xl) {
-      column-count: 5;
-    }
-}*/
+
+@font-face {
+  font-family: 'NeuzeitGro-Bla';
+  src: url('NeuzeitGro-Bla/font.woff2') format('woff2'), url('NeuzeitGro-Bla/font.woff') format('woff');
+}
+@font-face {
+  font-family: 'NeuzeitGro-Reg';
+  src: url('NeuzeitGro-Reg/font.woff2') format('woff2'), url('NeuzeitGro-Reg/font.woff') format('woff');
+}
 
 
 @font-face {
@@ -115,8 +116,18 @@ src: local('Bariol Bold Italic'), url('Bariol/bariol_bold_italic-webfont.woff')
 }
 
 
+/* @media (max-width: 575.98px) { ... }
+
+@media (max-width: 767.98px) { ... }
+
+@media (max-width: 991.98px) { ... }
+
+@media (max-width: 1199.98px) { ... } */
+
+
+
 body {
-    font-family: 'Bariol Regular', sans-serif;
+    font-family: 'NeuzeitGro-Reg', sans-serif;
 }
 
 input[type='checkbox'].check {
@@ -133,7 +144,7 @@ input[type='checkbox'].check:checked {
 
 
 a {
-    color: #AB5120 !important;
+    color: #469CA8 !important;
 }
 
 .boldkur {
@@ -166,40 +177,6 @@ a {
 }
 
 
-/*mg.AA{
-    border-bottom-style: solid;
-    border-bottom-width: 7px;
-    border-bottom-color: lime;
-
-}
-
-img.SMA{
-    border-bottom-style: solid;
-    border-bottom-width: 7px;
-    border-bottom-color: blue;
-}
-
-img.PAUI{
-    border-bottom-style: solid;
-    border-bottom-width: 7px;
-    border-bottom-color: yellow;
-
-}
-
-.card.PAUI{
-    border-left-style: solid;
-    border-left-width: 7px;
-    border-left-color: yellow;
-
-}
-
-img.MA{
-    border-bottom-style: solid;
-    border-bottom-width: 7px;
-    border-bottom-color: aqua;
-
-
-}*/
 
 img.vote {
     border-style: solid; !important;
@@ -207,7 +184,6 @@ img.vote {
     border-color: lawngreen; !important;
     border-radius:0;
 
-
 }
 
 .fett {
@@ -222,38 +198,38 @@ img.vote {
 
 .mab-menu-elm{
 
-  color: #AB5120;
+  color: #469CA8;
   font-weight: bold;
 }
 
 .mab-menu-elm a{
 
-  color: #AB5120 !important;
+  color: #469CA8 !important;
   font-weight: bold;
 }
 
 .border-thin{
     border-style: solid;
-    border-width: 2px;
-    border-color: #AB5120;
-    color: #AB5120;
+    border-width: 1px;
+    border-color: #469CA8;
+    color: #469CA8;
     background-color: #FFF;
-    border-radius: 0;
+    border-radius: 20px;
     padding-bottom: 0px;
     margin: 0px;
     margin-right:1px ;
     margin-top: 2px;
     line-height: 20px;
-    padding-top: 2px;
-    padding-bottom: 2px;
-    padding-right: 4px;
-    padding-left: 4px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    padding-right: 6px;
+    padding-left: 6px;
     height: auto;
 }
 
 .gemain-color {
 
-  color: #AB5120;
+  color: #469CA8;
 
 }
 
@@ -282,20 +258,20 @@ img.vote {
 
 
 .btn-primary {
-    color: #AB5120;
+    color: #469CA8;
     background-color: white;
-    border-color: #AB5120 !important;
+    border-color: #469CA8 !important;
 }
 
 
 .mybtn:hover {
     color: white;
-    background-color: #AB5120;
+    background-color: #469CA8;
 }
 
 .division-color{
 
-border-bottom: 1px solid #AB5120;
+border-bottom: 1px solid #469CA8;
 margin-right: -15px;
 margin-left: -15px;
 margin-top: 0;

marktplatz/templates/marktplatz/product_overview.html

@@ -144,23 +144,34 @@ $(document).ready(function(){
 
 
 
+
+
+
   .mab-product-title {
 
+    padding: .15em .75em .15em 0.75em;
+    border-style: solid;
+    border-width: 1px;
+    border-color: #469CA8;
+    color: #469CA8;
+    background-color: #FFFD;
+    border-radius: 150px;
+
+  	font-size: 2em;
+    font-weight: bold;
+    font-family: NeuzeitGro-Bla;
+    text-align: center;
+
   position: absolute;
-  bottom: 8px;
+  bottom: 16px;
   left: 16px;
-  color: #AB5120;
-  font-size: large;
-  font-weight: bold;
-  text-align: left;
-  background-color: rgba(0, 0, 0, 0);
-  text-shadow: 0 0 6px #444, 0 0 20px #888;
+
 
   }
 
 
   .mab-product-button-text {
-  color: #000;
+  color: #EA4814;
   font-size: large;
   font-weight: bold;
   text-align: left;
@@ -170,22 +181,24 @@ $(document).ready(function(){
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+
   position: inherit;
   }
 
   .mab-product-button {
-
-  position: absolute;
-  top: 16px;
-  left: 16px;
-  background-color: #FFF;
-  border: 2px solid #000;
-  border-radius: 50%;
-  width: 5em;
-  height: 5em;
-  text-align: center;
+  	position: absolute;
+  	top: 16px;
+  	right: 16px;
+  	background-color: #EDBBA8;
+  	border: 2px solid #EA4814;
+  	border-radius: 50%;
+  	width: 5em;
+  	height: 5em;
+  	text-align: center;
+  	transform: rotate(15deg);
   }
 
+
   .mab-product-vote {
 
   position: absolute;
@@ -204,13 +217,13 @@ $(document).ready(function(){
 
   /* background-color: #f0faf0; */
 
-  box-shadow: 0 4px 8px 0 rgba(157, 255, 137, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  box-shadow: 0 4px 8px 0 rgba(70, 156, 168, 0.2), 0 6px 20px 0 rgba(70, 156, 168,  0.19);
   margin-bottom: 40px;
   }
 
   .tag-container {
 
-  /* border-bottom: 1px solid #AB5120; */
+  /* border-bottom: 1px solid #469CA8; */
 
   }
 
@@ -305,7 +318,13 @@ $(document).ready(function(){
   </p>
 </div>
 
-<!-- Start Cards --><div class="card-columns" style="margin-top: 7px; orphans: 1; windows:1;">
+
+
+<!-- Start Cards -->
+
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *  -->
+
+<div class="card-columns" style="margin-top: 7px; orphans: 1; windows:1;">
 
   {{main_card|safe}}
 
@@ -316,7 +335,7 @@ $(document).ready(function(){
     <a href="{% url 'product-detail' product.pk %}">
       <div style="position: relative;text-align: center;">
         <img class="{% if user.is_authenticated %}{% get_vote_class product user %} {% endif %} {% for category in product.category.all %} {{category.short_name}} {% endfor %} card-img-top rounded-0" src="{{product.media_set.first.image_norm.url}}" alt="image">
-        <div class="mab-product-title" style="">{{product.name|upper }}</div>
+        <div class="mab-product-title" style=""><span>{{product.name }}</span></div>
 
         {% if product.frei == 'JAJA' %} <div class="mab-product-button" style="">  <div class="mab-product-button-text">
             Platz Frei!
@@ -352,8 +371,11 @@ $(document).ready(function(){
 
   {{sponsor_cards|safe}}
 
+</div>
+
+<!-- End Cards -->
 
-<!-- End Cards --></div>
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *  -->
 
 
 

project_base/templates/base_generic.html

@@ -33,7 +33,7 @@
         	z-index: 2;
         	background-color: #FCFCFC;
         	padding-right: 15px;
-          border-bottom: 1px solid #AB5120;
+          border-bottom: 1px solid #469CA8;
           /* box-shadow: 0 8px 4px -6px gray; */
       }
 
@@ -89,6 +89,52 @@
       text-decoration: none;
       cursor: pointer;
     }
+
+
+    .mab-menu-mega {
+
+      padding: .15em .75em .15em 0.75em;
+      border-style: solid;
+      border-width: 0px;
+      border-color: #469CA8;
+      color: #469CA8;
+      background-color: #CEEAE8;
+      border-radius: 150px;
+
+    	font-size: 1em;
+      /* font-weight: bold; */
+      font-family: NeuzeitGro-Bla;
+      text-align: center;
+      margin: 5px 10px 5px 10px;
+
+
+    /* position: absolute;
+    bottom: 16px;
+    left: 16px; */
+
+
+    }
+
+
+    .mab-menu-mega:hover {
+    	color: #FFF;
+    	background-color: #469cab;
+    }
+
+    .mab-menu-elm{
+      color: #469CA8;
+      padding: 12px 8px 12px 8px;
+      display:block;
+
+    }
+    .mab-menu-elm:hover{
+      color: #FFF;
+
+    }
+
+
+
+
     </style>
 
 
@@ -100,38 +146,135 @@
 
     {% if not embed %}
     {% block navbar %}
-    <nav class="navbar navbar-expand-sm navbar-fixed-top mab-navbar" style="">
+
+
+
+
+
+
+
+
+
+
+
+<!--
+********************************************************************************** -->
+
+
+<nav class="navbar navbar-fixed-top navbar-expand-lg navbar-light bg-light" style="padding-top:20px;">
+
+
+  <a class="navbar-brand navbar-right" href="{% url 'products' %}" style="width:50%" >
+    <span></span>
+  </a>
+
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTop" aria-controls="navbarTop" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+  <div class="collapse navbar-collapse" id="navbarTop">
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item active">
+      </li>
+
+    </ul>
+    <ul class="navbar-nav ml-auto">
+    <li class="nav-item">
+        <a class=" nav-link active nav-right boldkur mab-menu-elm" style="" href="{% url 'mab_login' %}">Einloggen</a>
+    </li>
+    <li class="nav-item">
+      <a class=" nav-link active nav-right boldkur mab-menu-elm" style="" href="{% url 'register-view' %}">Registrieren</a>
+    </li>
+
+    <li class="nav-item mab-nav-item mab-menu-mega">
+      <span class=" active boldkur mab-menu-elm" onclick="window.location='{% url 'search-agent-create' %}' ">Suchagent</span>
+      <!-- <a class=" nav-link active nav-right boldkur mab-menu-elm  " style="" href="{% url 'login' %}">Suchagent</a> -->
+    </li>
+    <li class="nav-item mab-nav-item mab-menu-mega">
+      <span class=" active boldkur mab-menu-elm" onclick="window.location='{% url 'submit' %}' ">Projekt eintragen</span>
+      <!-- <a class=" nav-link active nav-right boldkur mab-menu-elm " style="" href="{% url 'login' %}">Projekt eintragen</a> -->
+    </li>
+
+
+    </ul>
+    <!-- <form class="form-inline my-2 my-lg-0">
+      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+    </form> -->
+  </div>
+</nav>
+
+
+
+
+<nav class="navbar navbar-fixed-top mab-navbar navbar-expand-lg navbar-light bg-light">
+  <a class="navbar-brand navbar-right" href="{% url 'products' %}" style="width:45%" >
+    <img src="{% static 'logo_gemeinschaffen.png' %}" alt="Markplatz" class="img-fluid" width="auto" style="padding-bottom: 2px; width:75%">
+  </a>
+
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarBottom" aria-controls="navbarBottom" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+
+  <div class="collapse navbar-collapse" id="navbarBottom">
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item active">
+      </li>
+
+    </ul>
+    <ul class="navbar-nav ml-auto">
+      <!-- <li class="nav-item active">
+        <a class="nav-link disabled" href="#">Topic</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Topic</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link " href="#">Mobility</a>
+      </li> -->
+      <li class="nav-item">
+        <a class="nav-link " href="#">Wohnen</a>
+      </li>
+    </ul>
+
+    <!-- <form class="form-inline my-2 my-lg-0">
+      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+    </form> -->
+  </div>
+</nav>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <!-- <nav class="navbar navbar-expand-sm navbar-fixed-top mab-navbar" style="">
       <div class="container-fluid rounded-0" style="padding-left: 2px">
         <a class="navbar-brand navbar-right" href="{% url 'products' %}">
-          <img src="{% static 'newMAB.png' %}" alt="MAB20" height="40px" width="auto" style="margin: auto; padding-bottom: 2px">
+          <img src="{% static 'logo_gemeinschaffen.png' %}" alt="MAB20" height="40px" width="auto" style="margin: auto; padding-bottom: 2px; max-width:340px; ">
         </a>
 
-        <button class="navbar-toggler gemain-color" type="button " data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span> ⋁
-        </button>
-        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
 
-          <div class="navbar-nav navbar-right">
-            <a class="nav-link active nav-right boldkur mab-menu-elm" style="" href="{% url 'products' %}">MARKTPLATZ</a>
-            <a class="nav-link active nav-right boldkur mab-menu-elm" style="" href="{% url 'submit' %}">EINREICHEN</a>
 
-            <a class=" nav-link active nav-right boldkur mab-menu-elm" style="" href="{% url 'about' %}">ÜBER UNS</a>
-            {% if not user.is_authenticated %}
-            <a class=" nav-link active nav-right boldkur mab-menu-elm" style="" href="{% url 'login' %}">EINLOGGEN</a>
-            {% endif %}
 
-            {% if user.is_authenticated %}
-            <a class="nav-link nav-right boldkur mab-menu-elm" style="" href="{% url 'new-submit-view'%}?">PROJEKT EINREICHEN</a>
-            <a class="nav-link nav-right boldkur mab-menu-elm" style="" href="{% url 'my-products'%}">MEINE PROJEKTE</a>
-            <a class="nav-link nav-right boldkur mab-menu-elm" style="" href="{% url 'logout'%}?next={{request.path}}">AUSLOGGEN</a>
-            {% endif %}
 
-          </div>
-        </div>
       </div>
       <hr>
       <br>
-    </nav>
+    </nav> -->
+
+
+
     {% endblock %}
     {% endif %}