Improved input fields' look

TsimpDim · May 9, 2018 · 1957c25 · 1957c25
1 parent 01424c2
commit 1957c25
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 26 deletions.
diff --git a/_3RStore/static/css/options.css b/_3RStore/static/css/options.css
@@ -2,6 +2,9 @@
     margin-bottom: 2em;
 }
 
+.conf_inp_but{
+    margin-right: .2em;
+}
 @media(max-width: 485px){
     #filtered_del{
         margin-top:1em;

diff --git a/_3RStore/templates/options.html b/_3RStore/templates/options.html
@@ -25,12 +25,12 @@ <h3 class="card-header">Delete resources</h3>
             </div>
 
             <!-- Filtered delete -->
-            <div class="d-flex flex-column" id="filtered_del">
-                <form method="POST" action="fildel">
+            <form method="POST" action="fildel">
+                <h5 class="text-muted">Filtered Delete</h5>
+                <div class="d-flex flex-row" id="filtered_del">
                     <div class="dropdown">
-                        <button class="btn btn-danger" data-toggle="dropdown">
+                        <button class="btn btn-danger conf_inp_but" data-toggle="dropdown">
                             <span class="fa fa-remove"></span>  
-                            Filtered delete
                         </button>
 
                         <div class="dropdown-menu">
@@ -48,8 +48,8 @@ <h3 class="card-header">Delete resources</h3>
                             {% endfor %}
                         </datalist>
                     </div>
-                </form>
-            </div>
+                </div>
+            </form>
         </div>
 
         <!-- Sorting by time of posting -->
@@ -86,30 +86,31 @@ <h3 class="card-header">Sort by title</h3>
             </div>
         </div>
 
-        <!-- Remove tag -->
+        <!-- Remove tags -->
         <h3 class="card-header">Remove tags</h3>
-        <div class="card-block d-flex flex-row flex-wrap align-content-center justify-content-between align-items-start" id="filtered_del">
+        <div class="card-block d-flex flex-wrap align-content-center justify-content-between align-items-start" id="filtered_del">
             <form method="POST" action="remtag">
-                <div class="dropdown">
-                    <button class="btn btn-danger" data-toggle="dropdown">
-                        <span class="fa fa-minus-square"></span>  
-                        Remove tags
-                    </button>
-
-                    <div class="dropdown-menu">
-                        <button class="dropdown-item" type="submit">
-                            <span class="fa fa-check"></span> 
-                            Confirm</button></li>
+                <div class="d-flex flex-row">
+                    <div class="dropdown">
+                        <button class="btn btn-danger conf_inp_but" data-toggle="dropdown">
+                            <span class="fa fa-minus-square"></span>  
+                        </button>
+
+                        <div class="dropdown-menu">
+                            <button class="dropdown-item" type="submit">
+                                <span class="fa fa-check"></span> 
+                                Confirm</button></li>
+                        </div>
                     </div>
-                </div>
 
-                <div class="input-group">
-                    <input list="tags_remtag" type="text" name="tags" class="form-control" placeholder="Tags to remove...">
-                    <datalist id="tags_remtag">
-                        {% for tag in tags %}
-                            <option value="{{tag}}" class="datalist_option" ></option>
-                        {% endfor %}
-                    </datalist>
+                    <div class="input-group">
+                        <input list="tags_remtag" type="text" name="tags" class="form-control" placeholder="Tags to remove...">
+                        <datalist id="tags_remtag">
+                            {% for tag in tags %}
+                                <option value="{{tag}}" class="datalist_option" ></option>
+                            {% endfor %}
+                        </datalist>
+                    </div>
                 </div>
             </form>
         </div>