(css) vertical-center modals, bullet as separator

4 files changed, 25 insertions, 4 deletions

diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
index a4200f70f..5330ca220 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -23,7 +23,7 @@ export class ActionDropdownComponent<T> {
   @Input() actions: DropdownAction<T>[] | DropdownAction<T>[][] = []
   @Input() entry: T
 
-  @Input() placement = 'bottom-left'
+  @Input() placement = 'bottom-left auto'
 
   @Input() buttonSize: DropdownButtonSize = 'normal'
   @Input() buttonDirection: DropdownDirection = 'horizontal'
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index c4b713073..23a7dbb1e 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -20,7 +20,7 @@
         <my-date-toggle *ngIf="displayOptions.date" [date]="video.publishedAt"></my-date-toggle>
 
         <span class="views">
-          <ng-container *ngIf="displayOptions.date && displayOptions.views"> - </ng-container>
+          <ng-container *ngIf="displayOptions.date && displayOptions.views"> • </ng-container>
           <ng-container i18n *ngIf="displayOptions.views">{{ video.views | myNumberFormatter }} views</ng-container>
         </span>
       </span>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 9e69033e1..e87f59c98 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -43,7 +43,7 @@
             <h1 class="video-info-name">{{ video.name }}</h1>
 
             <div i18n class="video-info-date-views">
-              Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> - {{ video.views | myNumberFormatter }} views</span>
+              Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> • {{ video.views | myNumberFormatter }} views</span>
             </div>
           </div>
 
@@ -54,7 +54,7 @@
 
             <div class="video-info-first-row-bottom">
               <div i18n class="d-none d-md-block video-info-date-views">
-                Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> - {{ video.views | myNumberFormatter }} views</span>
+                Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> • {{ video.views | myNumberFormatter }} views</span>
               </div>
 
               <div class="video-actions-rates">
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 2944dd9e2..2f691de70 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -37,7 +37,28 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   }
 }
 
+
+@media screen and (min-width: 768px) { 
+  .modal:before {
+    display: inline-block;
+    vertical-align: middle;
+    content: " ";
+    height: 100%;
+  }
+
+  .modal-dialog {
+    display: inline-block;
+    text-align: left;
+    vertical-align: middle;
+    min-width: 500px;
+    width: 40vw;
+    max-width: 900px;
+  }
+}
+
 .modal {
+  text-align: center;
+
   .modal-content {
     background-color: var(--mainBackgroundColor);
   }