show grid count controls only if applicable

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">

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">

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">

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;
 }