Minor UI adjustments

limbo-works · Feb 20, 2023 · 1fdabc5 · 1fdabc5
1 parent 9c2010a
commit 1fdabc5
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 32 deletions.
diff --git a/src/Limbo.Umbraco.DreamBroker/wwwroot/Styles/Default.css b/src/Limbo.Umbraco.DreamBroker/wwwroot/Styles/Default.css
@@ -23,9 +23,19 @@
   margin-left: 7px;
 }
 .dreambroker-video-details {
-  display: flex;
   margin-top: 10px;
 }
+.dreambroker-video-details > h5 {
+  margin: 15px 0 3px 0;
+}
+.dreambroker-video-details > div {
+  display: flex;
+  border: 1px solid #e9e9eb;
+  border-radius: 3px;
+  padding: 12px 15px;
+  max-width: 800px;
+  box-sizing: border-box;
+}
 .dreambroker-video-details img {
   margin-right: 10px;
 }

diff --git a/src/Limbo.Umbraco.DreamBroker/wwwroot/Styles/Default.less b/src/Limbo.Umbraco.DreamBroker/wwwroot/Styles/Default.less
@@ -19,7 +19,7 @@
     &.loading > div {
         opacity: 0.5;
     }
-    
+
     input {
         width: 100%;
         flex: 1;
@@ -34,8 +34,21 @@
     }
 
     &-details {
-        display: flex;
         margin-top: 10px;
+
+        > h5 {
+            margin: 15px 0 3px 0;
+        }
+
+        > div {
+            display: flex;
+            border: 1px solid #e9e9eb;
+            border-radius: 3px;
+            padding: 12px 15px;
+            max-width: 800px;
+            box-sizing: border-box;
+        }
+
         img {
             margin-right: 10px;
         }
@@ -94,7 +107,7 @@
             text-align: left;
             padding: 0;
         }
-    
+
     }
 
 }
diff --git a/src/Limbo.Umbraco.DreamBroker/wwwroot/Views/Video.html b/src/Limbo.Umbraco.DreamBroker/wwwroot/Views/Video.html
@@ -9,35 +9,38 @@
         </button>
     </div>
     <div class="dreambroker-video-details" ng-show="model.value.video">
-        <div class="dreambroker-thumbnail">
-            <img ng-src="{{vm.thumbnail.url}}" width="{{vm.thumbnail.width}}" height="{{vm.thumbnail.height}}" />
-        </div>
+        <h5>Video</h5>
         <div>
-            <table>
-                <tr>
-                    <th>
-                        <localize key="dreambroker_id">ID</localize>
-                    </th>
-                    <td><code>{{model.value.video.videoId}}</code></td>
-                </tr>
-                <tr>
-                    <th>
-                        <localize key="dreambroker_title">Title</localize>
-                    </th>
-                    <td>{{model.value.video.title}}</td>
-                </tr>
-                <tr>
-                    <th>
-                        <localize key="dreambroker_duration">Duration</localize>
-                    </th>
-                    <td>
-                        <span ng-repeat="dur in vm.duration">
-                            {{dur.value}} <small>{{dur.text}}</small>
-                        </span>
-                        <em ng-show="vm.duration.length == 0">N/A</em>
-                    </td>
-                </tr>
-            </table>
+            <div class="dreambroker-thumbnail">
+                <img ng-src="{{vm.thumbnail.url}}" width="{{vm.thumbnail.width}}" height="{{vm.thumbnail.height}}" />
+            </div>
+            <div>
+                <table>
+                    <tr>
+                        <th>
+                            <localize key="dreambroker_id">ID</localize>
+                        </th>
+                        <td><code>{{model.value.video.videoId}}</code></td>
+                    </tr>
+                    <tr>
+                        <th>
+                            <localize key="dreambroker_title">Title</localize>
+                        </th>
+                        <td>{{model.value.video.title}}</td>
+                    </tr>
+                    <tr>
+                        <th>
+                            <localize key="dreambroker_duration">Duration</localize>
+                        </th>
+                        <td>
+                            <span ng-repeat="dur in vm.duration">
+                                {{dur.value}} <small>{{dur.text}}</small>
+                            </span>
+                            <em ng-show="vm.duration.length == 0">N/A</em>
+                        </td>
+                    </tr>
+                </table>
+            </div>
         </div>
     </div>
     <pre>{{model.value | json}}</pre>