dropzone v 1.3

components/NaikSanksi/InputTanggal.js

@@ -181,15 +181,10 @@ class InputTanggal extends Component {
             });
         }
         const thumbs = files.map((file, index) => (
-            <div md={3} key={index}>
-                <div className="text-left">{file.name}</div>
-                <div><button className="bg-transparent button-transparent border-0 float-right" onClick={removeFile(file)}>
-                    <em className="fas fa-trash"></em>
-                </button><Progress color="info" value={100}>Success</Progress>
-                </div>
-                <span className="float-right">
-                </span>
-            </div>
+            <p>
+                <em className="far fa-file" />&nbsp;&nbsp;{file.name}
+                <button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+            </p>
         ));
         return (
             <Card className="card-default">

components/PT/JawabanKeberatan/ModalPermohonan.js

@@ -131,15 +131,10 @@ export class ModalPermohonan extends Component {
 			});
 		}
 		const thumbs = files.map((file, index) => (
-			<div md={3} key={index}>
-				<div className="text-left">{file.name}</div>
-				<div><button className="bg-transparent button-transparent border-0 float-right" onClick={removeFile(file)}>
-					<em className="fas fa-trash"></em>
-				</button><Progress color="info" value={100}>Success</Progress>
-				</div>
-				<span className="float-right">
-				</span>
-			</div>
+			<p>
+				<em className="far fa-file" />&nbsp;&nbsp;{file.name}
+				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+			</p>
 		));
 		return (
 			<>

components/PT/Keberatan/ModalPermohonan.js

@@ -133,15 +133,10 @@ export class ModalPermohonan extends Component {
 			});
 		}
 		const thumbs = files.map((file, index) => (
-			<div md={3} key={index}>
-				<div className="text-left">{file.name}</div>
-				<div><button className="bg-transparent button-transparent border-0 float-right" onClick={removeFile(file)}>
-					<em className="fas fa-trash"></em>
-				</button><Progress color="info" value={100}>Success</Progress>
-				</div>
-				<span className="float-right">
-				</span>
-			</div>
+			<p>
+				<em className="far fa-file" />&nbsp;&nbsp;{file.name}
+				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+			</p>
 		));
 		return (
 			<>

components/Pelaporan/InputData.js

@@ -165,15 +165,10 @@ export class InputData extends Component {
 			});
 		}
 		const thumbs = files.map((file, index) => (
-			<div md={3} key={index}>
-				<div className="text-left">{file.name}</div>
-				<div><button className="bg-transparent button-transparent border-0 float-right" onClick={removeFile(file)}>
-					<em className="fas fa-trash"></em>
-				</button><Progress color="info" value={100}>Success</Progress>
-				</div>
-				<span className="float-right">
-				</span>
-			</div>
+			<p>
+				<em className="far fa-file" />&nbsp;&nbsp;{file.name}
+				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+			</p>
 		));
 		return (
 			<Formik

components/Pemeriksaan/InputEvaluasi.js

@@ -171,15 +171,20 @@ class InputEvaluasi extends Component {
 			});
 		}
 		const thumbs = files.map((file, index) => (
-			<div md={3} key={index}>
-				<div className="text-left">{file.name}</div>
-				<div><button className="bg-transparent button-transparent border-0 float-right" onClick={removeFile(file)}>
-					<em className="fas fa-trash"></em>
-				</button><Progress color="info" value={100}>Success</Progress>
-				</div>
-				<span className="float-right">
-				</span>
-			</div>
+			// <div md={3} key={index}>
+			// 	<div className="text-left">{file.name}</div>
+			// 	<div><button className="bg-transparent button-transparent border-0 float-right" onClick={removeFile(file)}>
+			// 		<em className="fas fa-trash"></em>
+			// 	</button>
+			// 		{/* <Progress color="info" value={100}>Success</Progress> */}
+			// 	</div>
+			// 	<span className="float-right">
+			// 	</span>
+			// </div>
+			<p>
+				<em className="far fa-file" />&nbsp;&nbsp;{file.name}
+				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+			</p>
 		));
 		return (
 			<>
@@ -266,9 +271,7 @@ class InputEvaluasi extends Component {
 										</DropzoneWrapper>
 									)}
 								</Field>
-								<div>
-									{thumbs}
-								</div>
+								{thumbs}
 								<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
 								<p className="mrgn-top-5 font-color-black">
 									Ukuran setiap dokumen maksimal 15mb

components/PerpanjanganSanksi/InputTanggal.js

@@ -164,15 +164,10 @@ class InputTanggal extends Component {
             });
         }
         const thumbs = files.map((file, index) => (
-            <div md={3} key={index}>
-                <div className="text-left">{file.name}</div>
-                <div><button className="bg-transparent button-transparent border-0 float-right" onClick={removeFile(file)}>
-                    <em className="fas fa-trash"></em>
-                </button><Progress color="info" value={100}>Success</Progress>
-                </div>
-                <span className="float-right">
-                </span>
-            </div>
+            <p>
+                <em className="far fa-file" />&nbsp;&nbsp;{file.name}
+                <button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+            </p>
         ));
         return (
             <Card className="card-default">

components/RekomendasiDelegasi/InputRekomendasi.js

@@ -149,15 +149,10 @@ class InputRekomendasi extends Component {
 			});
 		}
 		const thumbs = files.map((file, index) => (
-			<div md={3} key={index}>
-				<div className="text-left">{file.name}</div>
-				<div><button className="bg-transparent button-transparent border-0 float-right" onClick={removeFile(file)}>
-					<em className="fas fa-trash"></em>
-				</button><Progress color="info" value={100}>Success</Progress>
-				</div>
-				<span className="float-right">
-				</span>
-			</div>
+			<p>
+				<em className="far fa-file" />&nbsp;&nbsp;{file.name}
+				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+			</p>
 		));
 		return (
 			<Card className="card-default">

components/Sanksi/UploadSurat.js

@@ -150,15 +150,10 @@ export class UploadSurat extends Component {
 			});
 		}
 		const thumbs = files.map((file, index) => (
-			<div md={3} key={index}>
-				<div className="text-left">{file.name}</div>
-				<div><button className="bg-transparent button-transparent border-0 float-right" onClick={removeFile(file)}>
-					<em className="fas fa-trash"></em>
-				</button><Progress color="info" value={100}>Success</Progress>
-				</div>
-				<span className="float-right">
-				</span>
-			</div>
+			<p>
+				<em className="far fa-file" />&nbsp;&nbsp;{file.name}
+				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+			</p>
 		));
 		return (
 			<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>

components/TurunSanksi/InputTanggal.js

@@ -181,15 +181,10 @@ class InputTanggal extends Component {
             });
         }
         const thumbs = files.map((file, index) => (
-            <div md={3} key={index}>
-                <div className="text-left">{file.name}</div>
-                <div><button className="bg-transparent button-transparent border-0 float-right" onClick={removeFile(file)}>
-                    <em className="fas fa-trash"></em>
-                </button><Progress color="info" value={100}>Success</Progress>
-                </div>
-                <span className="float-right">
-                </span>
-            </div>
+            <p>
+                <em className="far fa-file" />&nbsp;&nbsp;{file.name}
+                <button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+            </p>
         ));
         return (
             <Card className="card-default">

styles/bootstrap/_card.scss

@@ -14,12 +14,12 @@
   border: $card-border-width solid $card-border-color;
   @include border-radius($card-border-radius);
 
-  > hr {
+  >hr {
     margin-right: 0;
     margin-left: 0;
   }
 
-  > .list-group {
+  >.list-group {
     border-top: inherit;
     border-bottom: inherit;
 
@@ -36,8 +36,8 @@
 
   // Due to specificity of the above selector (`.card > .list-group`), we must
   // use a child selector here to prevent double borders.
-  > .card-header + .list-group,
-  > .list-group + .card-footer {
+  >.card-header+.list-group,
+  >.list-group+.card-footer {
     border-top: 0;
   }
 }
@@ -71,7 +71,7 @@
     text-decoration: none;
   }
 
-  + .card-link {
+  +.card-link {
     margin-left: $card-spacer-x;
   }
 }
@@ -88,9 +88,7 @@
   border-bottom: $card-border-width solid $card-border-color;
 
   &:first-child {
-    @include border-radius(
-      $card-inner-border-radius $card-inner-border-radius 0 0
-    );
+    @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
   }
 }
 
@@ -101,9 +99,7 @@
   border-top: $card-border-width solid $card-border-color;
 
   &:last-child {
-    @include border-radius(
-      0 0 $card-inner-border-radius $card-inner-border-radius
-    );
+    @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius );
   }
 }
 
@@ -187,23 +183,25 @@
 //
 
 .card-group {
+
   // The child selector allows nested `.card` within `.card-group`
   // to display properly.
-  > .card {
+  >.card {
     margin-bottom: $card-group-margin;
   }
 
   @include media-breakpoint-up(sm) {
     display: flex;
     flex-flow: row wrap;
+
     // The child selector allows nested `.card` within `.card-group`
     // to display properly.
-    > .card {
+    >.card {
       // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
       flex: 1 0 0%;
       margin-bottom: 0;
 
-      + .card {
+      +.card {
         margin-left: 0;
         border-left: 0;
       }
@@ -218,6 +216,7 @@
             // stylelint-disable-next-line property-disallowed-list
             border-top-right-radius: 0;
           }
+
           .card-img-bottom,
           .card-footer {
             // stylelint-disable-next-line property-disallowed-list
@@ -233,6 +232,7 @@
             // stylelint-disable-next-line property-disallowed-list
             border-top-left-radius: 0;
           }
+
           .card-img-bottom,
           .card-footer {
             // stylelint-disable-next-line property-disallowed-list
@@ -273,7 +273,7 @@
 .accordion {
   overflow-anchor: none;
 
-  > .card {
+  >.card {
     overflow: hidden;
 
     &:not(:last-of-type) {
@@ -285,7 +285,7 @@
       @include border-top-radius(0);
     }
 
-    > .card-header {
+    >.card-header {
       @include border-radius(0);
       margin-bottom: -$card-border-width;
     }
@@ -299,6 +299,7 @@
   // width: 830px;
   margin-bottom: 30px;
 }
+
 .card-title-1 {
   margin-left: 10px;
   padding: 10px;
@@ -306,6 +307,7 @@
   text-align: left;
   color: rgba(255, 255, 255, 0.9);
 }
+
 .border-radius-login {
   border-radius: 5px;
 }
@@ -318,29 +320,35 @@
   height: 45px;
   margin: 20px;
 }
+
 .warna-penjadwalan-block {
   height: 35px;
   width: 60px;
   margin-left: auto;
 }
+
 .home-1 {
   margin-left: 20px;
   margin-right: 10px;
   margin-top: 20px;
 }
-.home-1-1{
+
+.home-1-1 {
   margin-left: 20px;
   margin-right: 10px;
   margin-top: -40px;
 }
+
 .home-2 {
   margin-top: 10%;
 }
+
 @media screen and (max-width: 450px) {
   .txt-size {
     font-weight: 400;
     color: black;
   }
+
   .home-1 {
     margin: 0;
   }
@@ -349,43 +357,53 @@
 .card-over {
   overflow: auto;
 }
+
 .f-size {
   margin-left: 10px;
 }
+
 .w-40 {
   width: 100px;
 }
+
 .margin-botton-20 {
   margin-bottom: 20px;
 }
+
 .text-tahun {
   font-size: 20px;
   text-align: center;
 }
+
 .font-color-white {
   color: #ffffff;
 }
+
 .font-color-black {
   color: black;
 }
+
 .border-2 {
   border-width: 0.5px;
   border-color: rgb(124, 122, 122);
 }
-.cd-home-1{
+
+.cd-home-1 {
   display: inline;
   position: relative;
   // background-color: red;
   // min-width: 300px;
   float: left;
 }
-.cd-home-2{
-display: inline;
-// background-color: rgb(50, 0, 230);
-// min-width: 300px;
-float: right;
+
+.cd-home-2 {
+  display: inline;
+  // background-color: rgb(50, 0, 230);
+  // min-width: 300px;
+  float: right;
 }
-.dropzone-style-1{
+
+.dropzone-style-1 {
   // background-color: #9e9e9e;
   // width: 50px;
   padding-top: 10px;
@@ -394,21 +412,24 @@ float: right;
   border-radius: 5px;
   cursor: pointer;
 }
-.center-ver-hor{
+
+.center-ver-hor {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
 }
 
-.invalid-mv:focus:invalid{
+.invalid-mv:focus:invalid {
   border: solid 1px red;
   // background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-exclamation-triangle' viewBox='0 0 16 16'%3E%3Cpath d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z'/%3E%3Cpath d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z'/%3E%3C/svg%3E") no-repeat 95% 50% ;
 }
-.invalid-mv:focus:valid{
+
+.invalid-mv:focus:valid {
   border: solid 1px green;
 }
-.getover{
+
+.getover {
   overflow: auto;
   font-size: 0.8rem;
-}
+}