fix: editing styles for correct display on mobile

exadel-inc · Jul 14, 2021 · 58a35b1 · 58a35b1
1 parent 2994954
commit 58a35b1
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 14 deletions.
diff --git a/pages/src/common/page.less b/pages/src/common/page.less
@@ -47,7 +47,7 @@ test-media-controls {
   display: block;
   padding: 5px;
   text-align: center;
-  min-width: 400px;
+  min-width: 250px;
 
   .btn {
     margin-right: 5px;

diff --git a/pages/views/_includes/header.njk b/pages/views/_includes/header.njk
@@ -1,11 +1,11 @@
-<nav class="navbar navbar-expand-md navbar-dark bg-dark esl-demo-header">
-  <div class="container">
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark esl-demo-header">
+  <div class="container flex-column flex-lg-row align-items-stretch align-items-lg-center">
     <a class="navbar-brand logo-light mr-5" href="{{ '/' | url }}">
       {% include "img/logo.svg" %}
       <span class="ml-2">Exadel Smart Library</span>
     </a>
     {% from 'header-menu.njk' import menu with context %}
-    <ul class="navbar-nav flex-grow-1">
+    <ul class="navbar-nav flex-grow-1 flex-sm-row">
       <li class="nav-item hd-dropdown">
         {{ menu ("Components", "basic") }}
       </li>

diff --git a/pages/views/basic/esl-media.njk b/pages/views/basic/esl-media.njk
@@ -12,19 +12,19 @@ tags: basic
 <hr/>
 <div class="row justify-content-around">
   <section class="col-12 row" data-demo="0">
-    <div class="demo col-6">
+    <div class="col-md-6 order-md-2">
+      <h3 class="text-center">ESLMedia Playgroud </h3>
+      <test-media-source target="[data-demo='0'] esl-media"></test-media-source>
+    </div>
+        <div class="demo col-md-6 order-md-1">
       <div class="img-container img-container-16-9 img-container-loaded" style="border: solid black 1px;">
         <esl-media group="demo-media" controls></esl-media>
       </div>
-    </div>
-    <div class="col-6">
-      <h3 class="text-center">ESLMedia Playgroud </h3>
       <test-media-controls target="[data-demo='0'] esl-media"></test-media-controls>
-      <test-media-source target="[data-demo='0'] esl-media"></test-media-source>
     </div>
   </section>
 
-  <section class="col-6" data-demo="1">
+  <section class="col-md-6" data-demo="1">
     <div class="demo">
       <h3 class="text-center">YouTube video</h3>
       <p>ESL Media has full support of YouTube provider.
@@ -48,7 +48,7 @@ tags: basic
       <test-media-controls target="[data-demo='1'] esl-media"></test-media-controls>
     </div>
   </section>
-  <section class="col-6" data-demo="2">
+  <section class="col-md-6" data-demo="2">
     <div class="demo">
       <h3 class="text-center">HTML video</h3>
       <p>ESL Media can be used for simple HTML videos.
@@ -70,7 +70,7 @@ tags: basic
       <test-media-controls target="[data-demo='2'] esl-media"></test-media-controls>
     </div>
   </section>
-  <section class="col-6" data-demo="3">
+  <section class="col-md-6" data-demo="3">
     <div class="demo">
       <h3 class="text-center">Basic Iframe Example</h3>
       <p>ESL Media also has build-in provider to wrap abstract iframe source. Here is a simple example for Vimeo
@@ -89,7 +89,7 @@ tags: basic
     </div>
   </section>
 
-  <section class="col-6" data-demo="4">
+  <section class="col-md-6" data-demo="4">
     <div class="demo">
       <h3 class="text-center">Basic Audio Example</h3>
       <p>ESL Media is also support simple HTML audio.</p>

diff --git a/pages/views/index.njk b/pages/views/index.njk
@@ -5,7 +5,7 @@ containerCls: container
 ui_playground: github.com/exadel-inc/ui-playground
 ---
 
-<div class="d-sm-flex align-items-center">
+<div class="d-flex flex-column flex-md-row align-items-center">
   <div class="brand-section logo-primary mr-2">{% include "img/logo.svg" %}</div>
   <p class="m-0 lead description">
     Exadel Smart Library (<strong>ESL</strong>) is a web components based library that gives you a set of <strong>lightweight</strong>