WIP on Views, added some styling.

abecam · Sep 24, 2023 · b8f100d · b8f100d
1 parent 9de7e01
commit b8f100d
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 15 deletions.
diff --git a/thefiltershop/filtershop_main/models.py b/thefiltershop/filtershop_main/models.py
@@ -14,7 +14,7 @@ class BaseModel(models.Model):
     description = models.TextField(max_length=1000, null=True, blank=True)
 
     created_by = models.ForeignKey(settings.AUTH_USER_MODEL, models.SET_NULL, 
-                                    verbose_name=('Created by'), editable=False, null=True, blank=True, related_name="%(app_label)s_%(class)s_related_type")
+                                    verbose_name=('created by'), editable=False, null=True, blank=True, related_name="%(app_label)s_%(class)s_related_type")
     date_creation = models.DateTimeField("date creation", auto_now_add=True)
     last_update = models.DateTimeField("last updated", auto_now=True)
 

diff --git a/thefiltershop/filtershop_main/static/thefiltershop/Glametrix.otf b/thefiltershop/filtershop_main/static/thefiltershop/Glametrix.otf
diff --git a/thefiltershop/filtershop_main/static/thefiltershop/GlametrixBold.otf b/thefiltershop/filtershop_main/static/thefiltershop/GlametrixBold.otf
diff --git a/thefiltershop/filtershop_main/static/thefiltershop/GlametrixLight.otf b/thefiltershop/filtershop_main/static/thefiltershop/GlametrixLight.otf
diff --git a/thefiltershop/filtershop_main/static/thefiltershop/style.css b/thefiltershop/filtershop_main/static/thefiltershop/style.css
@@ -1,7 +1,69 @@
+@font-face {
+    font-family: Glametrix;
+    src: url(Glametrix.otf);
+}
+
+@font-face {
+    font-family: Glametrix;
+    src: url(GlametrixBold.otf);
+    font-weight: bold;
+  }
+
 li a {
     color: green;
 }
 
 body {
-    background: lightgray;
-}
+    font: 140% Glametrix;
+    background: #d6f5f7;
+}
+
+a {
+        border: 2px solid #bbd6d8;
+        border-radius: 5px;
+        background: #bbd6d8;
+        text-decoration: none;
+}
+
+/* visited link */
+a:visited {
+    color: green;
+    background: #a8c0c2;
+  }
+
+  /* mouse over link */
+  a:hover {
+    color: rgb(55, 134, 115);
+    background: #b7e2e6;
+  }
+
+  /* selected link */
+  a:active {
+    color: rgb(79, 148, 100);
+    background: #c6e8eb;
+  }
+
+  .image_link a {
+    border: 2px solid #cfcfcf;
+    border-radius: 0px;
+    background: none;
+    text-decoration: none;
+  }
+
+  img {
+    border-radius: 8px;
+  }
+
+  .grid-container {
+    display: grid;
+    grid-template-columns: auto auto auto auto;
+    background: none;
+    padding: 5px;
+  }
+  .grid-item {
+    background: none;
+    border: none;
+    padding: 5px;
+    font-size: 30px;
+    text-align: center;
+  }
diff --git a/thefiltershop/filtershop_main/templates/thefiltershop/base.html b/thefiltershop/filtershop_main/templates/thefiltershop/base.html
@@ -8,7 +8,8 @@
 </head>
 <body>
     <div class="Top-Menu">
-    <img src="{% static 'images/Title617x107.png' %}" alt="Logo"><!-- Glametrix Bold --><a href="/">Games</a>  <a href="{% url 'filtershop_games:index_online_shops' %}">Online Shops</a>  <a href="/indexRegularShops.html">Regular Shops</a>
+    <img src="{% static 'images/Title617x107.png' %}" alt="Logo"><!-- Glametrix Bold --><a href="/">Games</a><a href="{% url 'filtershop_games:index_online_shops' %}">Online Shops</a><a href="/indexRegularShops.html">Regular Shops</a>
+    <a href="/indexRegularShops.html">Hall of shame!</a><a href="/indexRegularShops.html">Who are we</a><a href="/indexRegularShops.html">Our mission</a>  <a href="/indexRegularShops.html">Sponsors</a>
     </div>
     {% block main_content %}{% endblock %}
 </body>

diff --git a/thefiltershop/filtershop_main/templates/thefiltershop/base_games.html b/thefiltershop/filtershop_main/templates/thefiltershop/base_games.html
@@ -2,7 +2,7 @@
 
 {% block main_content %}
 <div class="Sub-Menu">
-<!-- Glametrix Bold --><a href="/">Under the spotlight!</a>  <a href="{% url 'filtershop_games:index_online_shops' %}">Artisan's games</a>  <a href="/indexRegularShops.html">Indie's games</a>  <a href="/indexRegularShops.html">Our curators</a>  <a href="/indexRegularShops.html">Sponsors</a>
+<!-- Glametrix Bold --><a href="/">Under the spotlight!</a>  <a href="{% url 'filtershop_games:index_online_shops' %}">Artisan's games</a>  <a href="/indexRegularShops.html">Indie's games</a>  <a href="/indexRegularShops.html">Our curators</a>
 </div>
     {% block content %}
     {% endblock %}

diff --git a/thefiltershop/filtershop_main/templates/thefiltershop/game.html b/thefiltershop/filtershop_main/templates/thefiltershop/game.html
@@ -23,16 +23,27 @@
 </div>
 
 <h1>
-    <img src="{{a_game.vignette.url}}"" alt="{{a_game.vignette.name}}"> 
+    <img src="{{title_image.photo.url}}"" alt="{{a_game.name}}" class="game_title_image">
 </h1>
-
 <p>{{ a_game.description }}</p>
-{% for publisher in a_game.publishers.all %}
-     <p>Published by {{ publisher.name }}</p>
-{% endfor %}
-{% for image in a_game.image_set.all %}
-    <img src="{{image.photo.url}}"" alt="{{image.name}}" width="500px"> 
+<div class="grid-container">
+    {% for studio in a_game.studios.all %}
+        <div class="grid-item">Developed by {{ studio.name }}</div>
+        <!-- TODO: Add link to studio page -->
+    {% endfor %}
+    {% for publisher in a_game.publishers.all %}
+        <div class="grid-item">Published by {{ publisher.name }}</div>
+        <!-- TODO: Add link to publisher page -->
+    {% endfor %}
+</div>
+<div class="grid-container">
+{% for image in screenshots.all %}
+
+    <div class="grid-item">
+        <img src="{{image.photo.url}}"" alt="{{image.name}}" width="400px" class="game_screenshot"> 
+    </div>
 {% endfor %}
+</div>
 
 <div class="filters">
     {% for filter in negative_filters %}

diff --git a/thefiltershop/filtershop_main/templates/thefiltershop/inline_game.html b/thefiltershop/filtershop_main/templates/thefiltershop/inline_game.html
@@ -5,13 +5,17 @@
         <p>{{ defaul_headline }}</p>
 </p>
 <p>
-    <a href="{% url 'filtershop_games:game' game.id %}"><img src="{{title_image.photo.url}}"" alt="{{game.name}}"></a>
+    <a href="{% url 'filtershop_games:game' game.id %}" class="image_link"><img src="{{title_image.photo.url}}"" alt="{{game.name}}"></a>
 </p>
 <p>{{ game.description }}</p>
 <p>{{ game.spotlight_count }} - {{ game.in_the_spotlight_since }}
+{% for studio in game.studios.all %}
+    <p>Developed by {{ studio.name }}</p>
+    <!-- TODO: Add link to studio page -->
+{% endfor %}
 {% for publisher in game.publishers.all %}
     <p>Published by {{ publisher.name }}</p>
 {% endfor %}
 {% for image in screenshots.all %}
-    <img src="{{image.photo.url}}"" alt="{{image.name}}" width="200px"> 
+    <img src="{{image.photo.url}}"" alt="{{image.name}}" width="200px" class="game_thumbnail"> 
 {% endfor %}
diff --git a/thefiltershop/filtershop_main/views/main.py b/thefiltershop/filtershop_main/views/main.py
@@ -92,7 +92,8 @@ def game(request, videogame_id):
     negative_filters = Filter.objects.filter(valueforfilter__for_entity__pk = a_game.pk, valueforfilter__filter__is_positive=False)
     positive_filters = Filter.objects.filter(valueforfilter__for_entity__pk = a_game.pk,  valueforfilter__filter__is_positive=True)
 
-    return render(request, "thefiltershop/game.html", {"a_game": a_game, "negative_filters": negative_filters, "positive_filters": positive_filters})
+    return render(request, "thefiltershop/game.html", {"a_game": a_game, "title_image": a_game.image_set.first(), "screenshots": a_game.image_set.all()[2:],
+                                                       "negative_filters": negative_filters, "positive_filters": positive_filters})
 
 def index_online_shops(request):
     latest_shops = Online_Shop.objects.order_by("-date_creation")[:5]