Databases
StackOverflow2013
Postsdbo
POSusy: Push(pre) and Pull(
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSusy: Push(pre) and Pull(
    primarykey
    data
    text
    <p>The following code places my <em>sidebar-first</em> one column off the left of the screen.</p> <pre><code>.has-sidebar-first { .l-content { @include span-columns(15 omega, 16); // Span 15 out of 16 columns. @include push(1, 16); // Push element by adding 1 out of 16 columns of left margin. } .l-region--sidebar-first { @include span-columns(1, 16); // Span 1 out of 16 columns. @include pull(1, 16); // Pull element by adding 15 out of 16 columns of negative left margin. } </code></pre> <p>}</p> <p>The <em>sidebar-first</em> should take up the first column and content should take up the next 15. I have had <em>pull</em> set 1 through to 16 but it is either out of place or disappears entirely. <img src="https://i.stack.imgur.com/7iYXF.jpg" alt="layout"></p> <p>Any suggestion?</p> <p><strong>Update1</strong>: Here is the full scss layout(including the suggestion from Eric Meyer (the man himself!) places the <em>sidebar-first</em> further off page to the left. It appears to be offpage by the same width as the <em>l-content</em> . </p> <pre><code>@import "susy"; // Susy Variables // Set consistent vertical and horizontal spacing units. $vert-spacing-unit: 20px; $horz-spacing-unit: 1em; // Define Susy grid variables mobile first. $total-columns: 4; $column-width: 4em; $gutter-width: $horz-spacing-unit; $grid-padding: 5px; $container-style: magic; $container-width: 1200px; // Susy Media Layouts @see http://susy.oddbird.net/guides/reference/#ref-media-layouts $tab: 44em 12; // At 44em use 12 columns. $desk: 70em 16; // At 70em use 16 columns. .l-header, .l-main, .l-footer { @include container; // Define these elements as the grid containers. margin-bottom: $vert-spacing-unit; } .l-region--highlighted, .l-region--help, .l-region--sidebar-first, .l-region--sidebar-second { margin-bottom: $vert-spacing-unit; } @include at-breakpoint($tab) { // At a given Susy Media Layout, use a given amount of columns. .l-header, .l-main, .l-footer { @include set-container-width; // Reset only the container width (elements have already been declared as containers). } .l-branding { @include span-columns(4, 12); // Span 4 out of 12 columns. } .l-region--header{ @include span-columns(8 omega, 12); // Span the last (omega) 8 columns of 12. } .l-region--navigation { clear: both; } .has-sidebar-first, .has-sidebar-second, .has-two-sidebars { .l-content { @include span-columns(7, 12); // Span 7 out of 12 columns. @include push(1, 12); // Push element by adding 1 out of 12 columns of left margin. } .l-region--sidebar-first, { @include span-columns(1, 12); // Span the 1 columns of 12. } .l-region--sidebar-second { @include span-columns(4 omega, 12); // Span the last (omega) 4 columns of 12. } .l-region--sidebar-first { @include pull(8, 12); // Pull element by adding 8 out of 12 columns of negative left margin. } .l-region--sidebar-second { clear: right; } } } @include at-breakpoint($desk) { .l-header, .l-main, .l-footer { @include set-container-width; // Reset only the container width (elements have already been declared as containers). } .l-branding { @include span-columns(6, 16); // Span 6 out of 16 columns. } .l-region--header{ @include span-columns(10 omega, 16); // Span the last (omega) 10 columns of 16. } .has-sidebar-first { .l-content { @include span-columns(15 omega, 16); // Span 15 out of 16 columns. } .l-region--sidebar-first { @include span-columns(1, 16); // Span 1 out of 16 columns. } } .has-sidebar-second { .l-content { @include span-columns(12, 16); // Span 12 out of 16 columns. } .l-region--sidebar-second { @include span-columns(4 omega, 16); // Span the last (omega) 4 columns of 16. clear: none; } } .has-two-sidebars { .l-content { @include span-columns(10, 16); // Span 10 out of 16 columns. @include push(1, 16); // Push element by adding 1 out of 16 columns of left margin. } .l-region--sidebar-first { @include span-columns(1, 16); // Span 1 out of 16 columns. } .l-region--sidebar-second { @include span-columns(5, 16); // Span 5 out of 16 columns. } .l-region--sidebar-first { @include pull(11, 16); // Pull element by adding 11 out of 16 columns of negative left margin. } .l-region--sidebar-second { @include omega; // This element spans the last (omega) column. clear: none; } } } </code></pre> <p><em>.has-two-sidebars</em> is working as desired. I am only hoping to fix <em>.has-sidebar-first</em> when <em>@include at-breakpoint($desk)</em> . If there is something inherently wrong with how it is set up then I will have to change the lot but I am hoping to simply change the the layout when viewed on a desktop where the is no sidebar second.</p> <p>Thanks</p> <p><strong>Update 2</strong> Following the suggestion to add <code>margin-left: 0;</code> here is it added.</p> <pre><code>.has-sidebar-first { .l-content { @include span-columns(15 omega, 16); // Span 15 out of 16 columns. } .l-region--sidebar-first { @include span-columns(1, 16); // Span 1 out of 16 columns. margin-left: 0; } </code></pre> <p>}</p> <p>While this now aligns the 'side-first' to the correct column, it appears below the content, as per the picture: <img src="https://i.stack.imgur.com/8xWsE.png" alt="Displaced sidebar"> The rest of the code is the same. The two sidebar option still displays correctly. Any suggestions?</p> <p><strong>Solution:</strong> As per Eric's suggestion I needed to clear and previously declared push and pulls. So the correct code is:</p> <pre><code>.has-sidebar-first { .l-content { @include span-columns(15 omega, 16); // Span 15 out of 16 columns. margin-left: 0; } .l-region--sidebar-first { @include span-columns(1, 16); // Span 1 out of 16 columns. margin-left: 0; } </code></pre> <p>Thanks</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USTaylor Taff
    1. USTaylor Taff
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload