appyoumake / Appyoumake

Nyeste MLAB
Other
1 stars 0 forks source link

(11) Implement template for HVSKS + CSS cleaning #386

Open CecilieGran opened 7 years ago

CecilieGran commented 7 years ago

TIMER HV

=63 timer


HV requires a template, need to find someone to do it and then implement it.

Youtube, video and upload media has ccs in mlab_component_config.css - should be placed under the component

upload media - add classes to the html code - and add the css there instead of overwriting css classes... same for youtube and maybe others.

Think all dialog box styling needs to move into it's own namespace, for instance mlab_dt_dlg rather than (for example) mlab_dt_label.

The mlab_all.css and maybe others are too long and needs to be split up.

leadermontanus commented 6 years ago

Suggested solutions

  1. Separate out 100% all styles that are NOT used on the Mlab editor page.

    • Keep in a single separate file
    • No need for Mlab prefix
    • Don't reuse/reference in any way in Mlab editor/components stylesheets
  2. (Try to) never use !important inside Mlab editor styling. This should be left as a standard way for components to ensure that they look correctly without having to know about all other components.

  3. Don't use any #mlab_editor

  4. Don't style HTML elements in the editor interface outside the editing rectangle using #mlab_editor selector. Instead use the DIVs IDs or classes for the different areas of the page.

  5. Don't style generic HTML elements in the editor interface. I.e. don't use span, instead use .my_span_class

  6. Use same paths for design time and runtime styling, in other words do not refer to #mlab_editor .xxx and .mlab_main_body_content for components. Instead just use .mlab_main_body_content which is present both in runtime and design time.

  7. Create a separate namespace for dialog boxes (qtip2). Here, in contravention of the points above, I suggest that we use a namespace path that is #mlab_editor .qtip_class ELEMENTS.

    This would take it out of the remaining namespaces and avoid clashes with others without having a too long name path.

leadermontanus commented 6 years ago

More suggestions

Look at flex and grid (and variables + editing them from JS: https://codepen.io/wesbos/pen/adQjoY!) in CSS3 for solution to orientation changes. Think we can fix this by simply designating top level DIV (wrapping each component) as a grid or flex, and then style it in CSS, but not sure.

Overall, the "wide screen" issue with out design is that we show a single DIV per component, so there is no way to account for wider screens between components! The "multiple image" component for Diakonhjemmet exemplifies this: Each page has a headline component, a "set of scrollable/swipeable images" component, and then uses standard paragraph text for the information about the images. Ideally a widescreen display should show headline and image on left, and text on right, there is now way to decide that 100% unless we made a more complex component (which is against Mlab ideals!) with headline, images and text in one component, and only that component was added to a page.

Also see https://www.sitepoint.com/understanding-and-using-rem-units-in-css/ & https://snook.ca/archives/html_and_css/vm-vh-units

leadermontanus commented 6 years ago

Lesser known CSS quirks & advanced tips – Peedu Tuisk – Medium https://medium.com/@peedutuisk/lesser-known-css-quirks-oddities-and-advanced-tips-css-is-awesome-8ee3d16295bb

leadermontanus commented 6 years ago

This is very useful to ensure no overlaps when we start using elements inside a composite component that are floating left: https://css-tricks.com/snippets/css/clear-fix/

div[data-mlab-type]::after { content: ""; display: table; clear: both; }