Fixed modal tabs

Change dropzone

Author: AramManukyan

src/_common/modal/modal-tabs.js

@@ -9,33 +9,19 @@
         border-bottom: 1px solid #ddd;
         box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
 
-        .modal-tab-item {
-            display: inline;
-
-            a {
-                display: inline-block;
-                padding: 10px 20px;
-            }
+        .nav-link {
+            padding: 10px 20px;
+            border: none;
 
             &:hover,
             &.active {
-                a {
-                    border-bottom: 2px solid  $color-primary;
-                }
+                color: $color-primary;
+                border-bottom: 2px solid  $color-primary;
             }
 
             &.active {
                 font-weight: 600;
             }
         }
     }
-
-    .modal-tab-pane {
-        display: none;
-        padding: 0;
-
-        &.active {
-            display: block;
-        }
-    }
 }

src/_common/modal/modal-tabs.scss

@@ -10,17 +10,17 @@
 			</div>
 			<div class="modal-body modal-tab-container">
 
-				<ul class="modal-tabs">
-		            <li class="modal-tab-item">
-		            	<a href="#gallery">Gallery</a>
+				<ul class="nav nav-tabs modal-tabs" role="tablist">
+		            <li class="nav-item">
+		            	<a class="nav-link" href="#gallery" data-toggle="tab" role="tab">Gallery</a>
 		            </li>
-		            <li class="modal-tab-item">
-		            	<a href="#upload">Upload</a>
+		            <li class="nav-item">
+		            	<a class="nav-link active" href="#upload" data-toggle="tab" role="tab">Upload</a>
 		            </li>
 		        </ul>
 
-		        <div class="modal-tab-content">
-		        	<div class="modal-tab-pane fade" id="gallery">
+		        <div class="tab-content modal-tab-content">
+		        	<div class="tab-pane fade" id="gallery" role="tabpanel">
 		        		<div class="images-container">
 		        			<div class="row">
 								{{#each gallery}}
@@ -33,13 +33,14 @@
 							</div>
 						</div>
 		        	</div>
-		        	<div class="modal-tab-pane fade" id="upload">
+		        	<div class="tab-pane fade active in" id="upload" role="tabpanel">
 		        		<div class="upload-container">
 			        		<div id="dropzone">
 								<form action="/" method="POST" enctype="multipart/form-data" class="dropzone needsclick dz-clickable" id="demo-upload">
-									<div class="dz-message needsclick">
-										Drop files here or click to upload.<br>
-										<span class="note needsclick">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>
+									<div class="dz-message-block">
+										<div class="dz-message needsclick">
+											Drop files here or click to upload.
+										</div>
 									</div>
 								</form>
 							</div>

src/app/_common/modals/modal-media/modal-media.hbs

@@ -30,14 +30,25 @@
 	}
 
 	.upload-container {
-		padding: 15px;
+		padding: 15px;	
 
 		.dropzone {
-			border: 2px dashed $color-divider;
+			position: relative;
+			border: 2px dashed $color-primary;
 			height: 270px;
 
-			.dz-message {
-				margin: 5em 0;
+			.dz-message-block {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translateY(-50%) translateX(-50%);
+
+				.dz-message {
+					margin: 0;
+					font-size: 24px;
+					color: $color-primary;
+					width: 230px;
+				}
 			}
 		}
 	}