Fixed wrapping sidebar if content in main column is to large

visonwang · Mar 31, 2016 · cdd4782 · cdd4782
1 parent 3d45542
commit cdd4782
Show file tree

Hide file tree

Showing 13 changed files with 34 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## WIP
+
+### Fixed
+- Fixed wrapping sidebar if content in main column is to large
+
 ## 0.11.0 (March 30, 2016)
 
 ### Added
@@ -10,7 +15,7 @@
 - Added global params object to view
 - Added file picker
 - Added support for script tag attributes 'defer' and 'async'
- 
+
 ### Changed
 - Transfer widget and menu positions on theme change
 - Image-, video-, link-picker: Preserve existing attributes

diff --git a/app/system/assets/less/pagekit.less b/app/system/assets/less/pagekit.less
@@ -8,7 +8,8 @@
 /* Sidebar
 ========================================================================== */
 
-.pk-width-sidebar {
+.pk-width-sidebar,
+.pk-width-content {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     width: 100%;
@@ -22,6 +23,7 @@
      */
 
     .pk-width-sidebar { width: (200px + @global-grid-gutter); }
+    .pk-width-content { width: ~'calc(100% - @{global-grid-gutter} - 200px)'; }
 
 }
 
@@ -50,6 +52,7 @@
      */
 
     .pk-width-sidebar { width: (250px + 40px); }
+    .pk-width-content { width: ~'calc(100% - 290px)'; }
 
 }
 
@@ -74,8 +77,10 @@
      */
 
     .pk-width-sidebar { width: (250px + 50px); }
+    .pk-width-content { width: ~'calc(100% - 300px)'; }
 
-    .pk-width-sidebar-large { width: (270px + 50px); }
+    .pk-width-sidebar-large .pk-width-sidebar { width: (270px + 50px); }
+    .pk-width-sidebar-large .pk-width-content { width: ~'calc(100% - 320px)'; }
 
 }
 

diff --git a/app/system/modules/info/views/info.php b/app/system/modules/info/views/info.php
@@ -13,7 +13,7 @@
         </div>
 
     </div>
-    <div class="uk-flex-item-1">
+    <div class="pk-width-content">
 
         <ul id="tab-content" class="uk-switcher uk-margin">
             <li>

diff --git a/app/system/modules/settings/views/settings.php b/app/system/modules/settings/views/settings.php
@@ -14,7 +14,7 @@
             </div>
 
         </div>
-        <div class="uk-flex-item-1">
+        <div class="pk-width-content">
 
             <ul class="uk-switcher uk-margin" v-el:content>
                 <li v-for="section in sections | orderBy 'priority'">

diff --git a/app/system/modules/site/app/components/node-page.vue b/app/system/modules/site/app/components/node-page.vue
@@ -1,7 +1,7 @@
 <template>
 
-    <div class="uk-grid pk-grid-large uk-form-stacked" data-uk-grid-margin>
-        <div class="uk-flex-item-1">
+    <div class="uk-grid pk-grid-large pk-width-sidebar-large uk-form-stacked" data-uk-grid-margin>
+        <div class="pk-width-content">
 
             <div class="uk-form-row">
                 <input class="uk-width-1-1 uk-form-large" type="text" name="page[title]" :placeholder="'Enter Title' | trans" v-model="page.title" v-validate:required lazy>
@@ -17,7 +17,7 @@
             </div>
 
         </div>
-        <div class="pk-width-sidebar pk-width-sidebar-large">
+        <div class="pk-width-sidebar">
 
             <div class="uk-panel">
 

diff --git a/app/system/modules/site/app/components/widget-menu.vue b/app/system/modules/site/app/components/widget-menu.vue
@@ -1,7 +1,7 @@
 <template>
 
-    <div class="uk-grid pk-grid-large" data-uk-grid-margin>
-        <div class="uk-flex-item-1 uk-form-horizontal">
+    <div class="uk-grid pk-grid-large pk-width-sidebar-large" data-uk-grid-margin>
+        <div class="pk-width-content uk-form-horizontal">
 
             <div class="uk-form-row">
                 <label for="form-title" class="uk-form-label">{{ 'Title' | trans }}</label>
@@ -78,7 +78,7 @@
             </div>
 
         </div>
-        <div class="pk-width-sidebar pk-width-sidebar-large">
+        <div class="pk-width-sidebar">
 
             <partial name="settings"></partial>
 

diff --git a/app/system/modules/site/app/components/widget-text.vue b/app/system/modules/site/app/components/widget-text.vue
@@ -1,7 +1,7 @@
 <template>
 
-    <div class="uk-grid pk-grid-large" data-uk-grid-margin>
-        <div class="uk-flex-item-1 uk-form-stacked">
+    <div class="uk-grid pk-grid-large pk-width-sidebar-large" data-uk-grid-margin>
+        <div class="pk-width-content uk-form-stacked">
 
             <div class="uk-form-row">
 
@@ -18,7 +18,7 @@
             </div>
 
         </div>
-        <div class="pk-width-sidebar pk-width-sidebar-large">
+        <div class="pk-width-sidebar">
 
             <partial name="settings"></partial>
 

diff --git a/app/system/modules/site/views/admin/index.php b/app/system/modules/site/views/admin/index.php
@@ -24,7 +24,7 @@
             </div>
 
         </div>
-        <div class="uk-flex-item-1">
+        <div class="pk-width-content">
 
             <div class="uk-margin uk-flex uk-flex-space-between uk-flex-wrap" data-uk-margin>
                 <div class="uk-flex uk-flex-middle uk-flex-wrap" data-uk-margin>

diff --git a/app/system/modules/site/views/admin/settings.php b/app/system/modules/site/views/admin/settings.php
@@ -14,7 +14,7 @@
             </div>
 
         </div>
-        <div class="uk-flex-item-1">
+        <div class="pk-width-content">
 
             <ul class="uk-switcher uk-margin" v-el:content>
                 <li v-for="section in sections | orderBy 'priority'">

diff --git a/app/system/modules/user/app/components/widget-login.vue b/app/system/modules/user/app/components/widget-login.vue
@@ -1,7 +1,7 @@
 <template>
 
-    <div class="uk-grid pk-grid-large" data-uk-grid-margin>
-        <div class="uk-flex-item-1 uk-form-horizontal">
+    <div class="uk-grid pk-grid-large pk-width-sidebar-large" data-uk-grid-margin>
+        <div class="pk-width-content uk-form-horizontal">
 
             <div class="uk-form-row">
                 <label for="form-title" class="uk-form-label">{{ 'Title' | trans }}</label>
@@ -26,7 +26,7 @@
             </div>
 
         </div>
-        <div class="pk-width-sidebar pk-width-sidebar-large">
+        <div class="pk-width-sidebar">
 
             <partial name="settings"></partial>
 

diff --git a/app/system/modules/user/views/admin/role-index.php b/app/system/modules/user/views/admin/role-index.php
@@ -24,7 +24,7 @@
             </div>
 
         </div>
-        <div class="uk-flex-item-1">
+        <div class="pk-width-content">
 
             <h2>{{ current.name }}</h2>
 

diff --git a/app/system/modules/widget/app/components/widget-settings.vue b/app/system/modules/widget/app/components/widget-settings.vue
@@ -1,7 +1,7 @@
 <template>
 
-    <div class="uk-grid pk-grid-large" data-uk-grid-margin>
-        <div class="uk-flex-item-1 uk-form-horizontal">
+    <div class="uk-grid pk-grid-large pk-width-sidebar-large" data-uk-grid-margin>
+        <div class="pk-width-content uk-form-horizontal">
 
             <div class="uk-form-row">
                 <label for="form-title" class="uk-form-label">{{ 'Title' | trans }}</label>
@@ -12,7 +12,7 @@
             </div>
 
         </div>
-        <div class="pk-width-sidebar pk-width-sidebar-large">
+        <div class="pk-width-sidebar">
 
             <partial name="settings"></partial>
 

diff --git a/app/system/modules/widget/views/index.php b/app/system/modules/widget/views/index.php
@@ -29,7 +29,7 @@
             </div>
 
         </div>
-        <div class="uk-flex-item-1">
+        <div class="pk-width-content">
 
             <div class="uk-margin uk-flex uk-flex-space-between uk-flex-wrap" data-uk-margin>
                 <div class="uk-flex uk-flex-middle uk-flex-wrap" data-uk-margin>
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,7 @@ @@
             </div>
         </div>
-        <div class="uk-flex-item-1">
+        <div class="pk-width-content">
             <ul id="tab-content" class="uk-switcher uk-margin">
                 <li>
@@ Expand Down @@