Uploaded image for project: 'ReactOS Online Service'
  1. ReactOS Online Service
  2. ONLINE-830

Pages shouldnt be "contained" as they are now

    XMLWordPrintable

Details

    • Bug
    • Resolution: Fixed
    • Major
    • None
    • None
    • None

    Description

      Right now the layouts/page/single.html is the main layout responsible to create all the pages based on it. However, its current code limits the layout possibilities.
      Right now single.html is of the kind (excerpt):

              <div id="content">
                  {{ if isset .Params "id" }}
       
                    {{ partial .Params.id . }}
       
                  {{ else }}
       
                  <div class="container">
       
                      <div class="row">
       
                          <div class="col-md-12">
       
                              <div>
                                {{ .Content }}
                              </div>
       
                          </div>
       
                      </div>
                      <!-- /.row -->
       
                  </div>
                  <!-- /.container -->

      So that means that the .Content is placed inside a "col-md-12" which is part of a "row" which is part of a "container". However, "container" is a boxed div, aka, anything placed inside .Content won't be able to have Full-Width but will be boxed. So forget about a div with full width since that point.. Unless...
      ....
      Unless...
      OPTION A : There is an "id" defined in the front matter of the Page, then we won't be falling in the "else" clause of single.html but in the "if" one, and the framework will load a Partial named "<id>.html" stored in the layouts/partials folder. And this <id>.html could have any design.

      In such case, the page, ie, development.html will be just the code of its front matter:

      ---
      title:       "Developing!"
      type:        page
      date:        2015-11-21
      changed:     2018-08-12
      draft:       false
      promote:     false
      sticky:      false
      url:         /developing
      menu:        [ "main-menu" ]
      id:          developing
      css:     	
          - "/css/ros-design.css"
      ---

      With all the developing.html content code implemented in layouts/partials/developing.html:

      <div id="developing" class="container-fluid">
      	<div class="row">
      		<div class="col-md-12 text-center">
      			<h1> Your jump into the NT architecture</h1>
      ....

      This approach means that the /layouts/partials would become crowded of content (and not just Partials) because we would end having a whatever.html as a front matter redirecting to a layouts/partials/whatever.html to load its content.

      OPTION B. "container" in single.html becomes a "container-fluid" so you can have full-width access if desired, and if you need a boxed approach you can implement col-offsets mimicking a boxed container inside the

      {.Content}.

      OPTION C. Moving all the <div class="container"> from single.html inside the {.Content}

      itself. Aka, each time a Content is implemented, it should start defining the Container class.
      PROs: It follows the same logic that Partials. Right now (look at the "IF") {{ partial .Params.id . }} are supposed to define a <div class="container"> since there is no Container class while

      {.Content}

      shouldn't as the div class container is already defined in the single.html.

      Bootstraps doesn't recomend to have "containers" nested, and the good bits say that there should be just one container per page.

      So ideas? I can follow any of the routes. With PR prepared to fix any of these issues. Just tell me.

      Attachments

        Issue Links

          Activity

            People

              Colin Finck Colin Finck
              vicmarcal vicmarcal
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: