Updated property editor to look better in cramped spaces

limbo-works · May 22, 2023 · a2a077f · a2a077f
1 parent 3700c9b
commit a2a077f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/src/Limbo.Umbraco.YouTube/wwwroot/Styles/Default.css b/src/Limbo.Umbraco.YouTube/wwwroot/Styles/Default.css
@@ -47,6 +47,8 @@
   padding: 12px 15px;
   max-width: 800px;
   box-sizing: border-box;
+  flex-wrap: wrap;
+  gap: 20px 15px;
 }
 .youtube-video-details h5 {
   margin: 15px 0 3px 0;
@@ -70,14 +72,14 @@
 .youtube-video-details table tr + tr td {
   padding-top: 4px;
 }
+.youtube-video-info {
+  flex: 1;
+}
 .youtube-video pre {
   display: none;
   font-size: 10px;
   line-height: 12px;
 }
-.youtube-video .youtube-thumbnail + div {
-  margin-left: 10px;
-}
 .umb-editors .youtube-video-details {
   display: block;
 }

diff --git a/src/Limbo.Umbraco.YouTube/wwwroot/Styles/Default.less b/src/Limbo.Umbraco.YouTube/wwwroot/Styles/Default.less
@@ -15,12 +15,12 @@
     &.loading > div {
         opacity: 0.5;
     }
-    
+
     input {
         width: 100%;
         flex: 1;
     }
-    
+
     textarea {
         width: 100%;
         flex: 1;
@@ -53,7 +53,7 @@
     }*/
 
     &-details {
-        
+
         margin-top: 10px;
         > div {
             display: flex;
@@ -62,6 +62,8 @@
             padding: 12px 15px;
             max-width: 800px;
             box-sizing: border-box;
+            flex-wrap: wrap;
+            gap: 20px 15px;
         }
 
         h5 {
@@ -91,16 +93,16 @@
 
     }
 
+    &-info {
+        flex: 1;
+    }
+
     pre {
         display: none;
         font-size: 10px;
         line-height: 12px;
     }
 
-    .youtube-thumbnail + div {
-        margin-left: 10px;
-    }
-
     .umb-editors & {
 
         &-details {

diff --git a/src/Limbo.Umbraco.YouTube/wwwroot/Views/Video.html b/src/Limbo.Umbraco.YouTube/wwwroot/Views/Video.html
@@ -13,7 +13,7 @@ <h5><localize key="limboYouTube_video">Video</localize></h5>
             <div class="youtube-thumbnail">
                 <img ng-src="{{vm.thumbnail.url}}" width="{{vm.thumbnail.width}}" height="{{vm.thumbnail.height}}" />
             </div>
-            <div>
+            <div class="youtube-video-info">
                 <table>
                     <tr>
                         <th>