From cbb714c23534b19d8db8674e2288e95de32a4493 Mon Sep 17 00:00:00 2001
From: simon <simobilleter@gmail.com>
Date: Mon, 30 May 2022 16:21:24 +0700
Subject: [PATCH] show grid count controls only if applicable

---
 tubearchivist/home/templates/home/channel_id.html  |  9 ++++++---
 tubearchivist/home/templates/home/home.html        |  9 ++++++---
 tubearchivist/home/templates/home/playlist_id.html |  9 ++++++---
 tubearchivist/static/css/style.css                 | 10 ++++++++--
 4 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/tubearchivist/home/templates/home/channel_id.html b/tubearchivist/home/templates/home/channel_id.html
index 04a43336..5aefcba8 100644
--- a/tubearchivist/home/templates/home/channel_id.html
+++ b/tubearchivist/home/templates/home/channel_id.html
@@ -145,9 +145,12 @@
             <img src="{% static 'img/icon-sort.svg' %}" alt="sort-icon" onclick="showForm()" id="animate-icon">
             {% if view_style == "grid" %}
             <div class="grid-count">
-                <span>{{ grid_items }}</span>
-                <img src="{% static 'img/icon-add.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"1"}}" alt="grid plus row">
-                <img src="{% static 'img/icon-substract.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"-1"}}" alt="grid minus row">
+                {% if grid_items < 7 %}
+                    <img src="{% static 'img/icon-add.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"1"}}" alt="grid plus row">
+                {% endif %}
+                {% if grid_items > 3 %}
+                    <img src="{% static 'img/icon-substract.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"-1"}}" alt="grid minus row">
+                {% endif %}
             </div>
             {% endif %}
             <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view">
diff --git a/tubearchivist/home/templates/home/home.html b/tubearchivist/home/templates/home/home.html
index fc4c76ae..cc497568 100644
--- a/tubearchivist/home/templates/home/home.html
+++ b/tubearchivist/home/templates/home/home.html
@@ -76,9 +76,12 @@
             <img src="{% static 'img/icon-sort.svg' %}" alt="sort-icon" onclick="showForm()" id="animate-icon">
             {% if view_style == "grid" %}
                 <div class="grid-count">
-                    <span>{{ grid_items }}</span>
-                    <img src="{% static 'img/icon-add.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"1"}}" alt="grid plus row">
-                    <img src="{% static 'img/icon-substract.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"-1"}}" alt="grid minus row">
+                    {% if grid_items < 7 %}
+                        <img src="{% static 'img/icon-add.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"1"}}" alt="grid plus row">
+                    {% endif %}
+                    {% if grid_items > 3 %}
+                        <img src="{% static 'img/icon-substract.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"-1"}}" alt="grid minus row">
+                    {% endif %}
                 </div>
             {% endif %}
             <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view">
diff --git a/tubearchivist/home/templates/home/playlist_id.html b/tubearchivist/home/templates/home/playlist_id.html
index 60b55228..1f5569cb 100644
--- a/tubearchivist/home/templates/home/playlist_id.html
+++ b/tubearchivist/home/templates/home/playlist_id.html
@@ -80,9 +80,12 @@
         <div class="view-icons">
             {% if view_style == "grid" %}
             <div class="grid-count">
-                <span>{{ grid_items }}</span>
-                <img src="{% static 'img/icon-add.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"1"}}" alt="grid plus row">
-                <img src="{% static 'img/icon-substract.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"-1"}}" alt="grid minus row">
+                {% if grid_items < 7 %}
+                    <img src="{% static 'img/icon-add.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"1"}}" alt="grid plus row">
+                {% endif %}
+                {% if grid_items > 3 %}
+                    <img src="{% static 'img/icon-substract.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"-1"}}" alt="grid minus row">
+                {% endif %}
             </div>
             {% endif %}
             <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view">
diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css
index 5ed455d6..f97e2f27 100644
--- a/tubearchivist/static/css/style.css
+++ b/tubearchivist/static/css/style.css
@@ -346,14 +346,20 @@ button:hover {
     justify-content: end;
 }
 
-.view-icons img,
-.grid-count img {
+.view-icons img {
     width: 30px;
     margin: 5px 10px;
     cursor: pointer;
     filter: var(--img-filter);
 }
 
+.grid-count img {
+    width: 15px;
+    margin: 5px;
+    cursor: pointer;
+    filter: var(--img-filter);
+}
+
 #hidden-form {
     display: none;
 }