1 2 Previous Next 16 Replies Latest reply on Feb 15, 2015 11:58 AM by fac586 Go to original post
      • 15. Re: Dynamic number of report regions
        partlycloudy

        I am using Firefox 35.0.1 on Windows 7. Here is a screenshot. I just love how the responsive grid in Theme 25 changes the number of columns per row as the viewport width changes, I guess it doesn't take much to make me happy :-)

         

        Not sure what you mean by domain knowledge. All I meant was that my real data has the concept of alternate "views" similar to Celsius/Fahrenheit so I was thinking of implementing it exactly the way you have.

         

        Report export - Well, if they want the custom formatting exported, they can take a darn screenshot :-) the underlying dataset is really pretty trivial (just one table) the challenge was in presenting it in a more accesible layout.

        • 16. Re: Re: Dynamic number of report regions
          fac586

          VANJ wrote:

           

          Please post all the template details in the final iteration

          Sorry for the delay. Busy week at work.

           

          Report Template

           

          As pagination etc is not required, the requirement to use a table as the report container discussed above does not apply, so the unnecessary table is replaced by a semantically neutral div. The pagination sub-templates (which weren't mentioned above but were also copied from the Standard report template) can also be dispensed with.

           

          Before Rows

           

          <div class="uReportContainer" #REPORT_ATTRIBUTES# id="report_#REGION_STATIC_ID#">
          <div class="uReportBody">
          <h1>&P45_YEAR. temperatures (&deg;&P45_SCALE.)</h1>
          


          After Rows

           

          </div>
          </div>
          <div class="uReportDownloadLinks clearfix">#EXTERNAL_LINK##CSV_LINK#</div>
          


          Row Template 1

           

          The report tables get a section wrapper to facilitate adding the month headings. (The individual table structures are simple enough for the column header IDs and cell header attributes to be removed, unless they're required for use in CSS or jQuery selectors.)

           

          <section>
          <h2>#MONTH_NAME#</h2>
          <table class="uReport uReportStandard">
          <thead> <tr> <th id="#YEAR#-#MONTH#-WEEK">Week <th id="#YEAR#-#MONTH#-MIN">Min <th id="#YEAR#-#MONTH#-MAX">Max <th id="#YEAR#-#MONTH#-AVG">Average
          <tbody>
            <tr> <td headers="#YEAR#-#MONTH#-WEEK">#WEEK# <td headers="#YEAR#-#MONTH#-MIN">#TEMP_MIN# <td headers="#YEAR#-#MONTH#-MAX">#TEMP_MAX# <td headers="#YEAR#-#MONTH#-AVG">#TEMP_AVG#
          

           

          Row Template 1 Condition

           

          #RN# = 1
          

           

          Row Template 2

           

          As the edit links can now be included inside the section containers, the table footers are removed.

           

            <tr> <td headers="#YEAR#-#MONTH#-WEEK">#WEEK# <td headers="#YEAR#-#MONTH#-MIN">#TEMP_MIN# <td headers="#YEAR#-#MONTH#-MAX">#TEMP_MAX# <td headers="#YEAR#-#MONTH#-AVG">#TEMP_AVG#
          </table>
          #LINK$01#
          </section>
          

           

          Row Template 2 Condition

           

          #RN# = #N#
          

           

          Row Template 3

           

            <tr> <td headers="#YEAR#-#MONTH#-WEEK">#WEEK# <td headers="#YEAR#-#MONTH#-MIN">#TEMP_MIN# <td headers="#YEAR#-#MONTH#-MAX">#TEMP_MAX# <td headers="#YEAR#-#MONTH#-AVG">#TEMP_AVG#
          

           

          CSS

           

          It's now the section containers that need fluid positioning rather than the report tables; the edit links are visually (but not semantically) pulled up to the top right of each section to balance the month name and eliminate wasted space; the weight of the headings is reduced (font availability and browser support permitting); and the report column width and alignment are set so the reports have a consistent width to ensure a clean grid layout.

           

          There's no download icon in the theme 25 palette so the download link is just left with its default appearance, but clear of the report grid.

           

          .uReportContainer section {
            float: left;
            position: relative;
            margin: 0 2em 2em 0;
          }
          .uReportContainer a.uButton.iconOnly.iconButton.edit {
            display: block;
            position: absolute;
            top: 8px;
            right: 0;
          }
          .uReportContainer h1 {
            font: normal 100 3em/1.6 "helvetica neue", helvetica, arial, sans-serif;
          }
          .uReportContainer h2 {
            font: normal 100 2em/1.6 "helvetica neue", helvetica, arial, sans-serif;
          }
          .uReport.uReportStandard td {
            width: 4em;
            text-align: right;
          }
          .uReport.uReportStandard td:first-child {
            width: 3em;
            text-align: center;
          }
          .uReportDownloadLinks {
            clear: both;
          }
          
          1 2 Previous Next