al-quran.reflectslight.io/src/html/TheSurahPage.html.erb

<!DOCTYPE html>
<html lang="<%= locale %>">
  <head>
    <title>Al-Quran: Loading</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style class="webpackage">
      html {
          height: 100%;
      }
      body {
          height: 100%;
          margin: 0;
          padding: 0;
      }
      .webpackage.loader {
          height: 100%;
      }

      .webpackage.loader div:first-child {
          width: 200px;
          margin: 0 auto;
          display: flex;
          flex-direction: column;
          position: relative;
          top: 250px;
      }

      .webpackage.loader progress {
          width: 100%;
      }

      .webpackage.loader .percentage {
          font-family: monospace;
          text-align: center;
          width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="webpackage loader">
      <div>
        <progress value="0" max="100"></progress>
        <span class="percentage">Loading...</span>
      </div>
    </div>
    <div class="root-box" data-locale="<%= locale %>" data-surah-id="<%= surah_id %>"></div>
    <script src="/js/pages/TheSurahPage/package.js"></script>
  </body>
</html>
src/: add src/surah.html 2022-10-31 19:27:21 +01:00			`<!DOCTYPE html>`
src/: set html "lang" attribute 2022-11-08 10:02:37 +01:00			`<html lang="<%= locale %>">`
src/: add src/surah.html 2022-10-31 19:27:21 +01:00			`<head>`
src/surah.html: add title to page Fix #4 2022-11-01 09:55:44 +01:00			`<title>Al-Quran: Loading</title>`
improve layout on mobile 2022-11-02 11:26:58 +01:00			`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
Fit content on 1368x768 device (follow up) Follow up to 80881311badb47133cbcdf440ee0cf470efae6ae 2022-12-24 16:55:28 +01:00			`<style class="webpackage">`
add "WebPackage" The "WebPackage" object allows for scripts, stylesheets, fonts, images and other webpage assets to be downloaded for the page's primary content to use afterwards. 2022-11-12 22:55:53 +01:00			`html {`
			`height: 100%;`
			`}`
			`body {`
			`height: 100%;`
			`margin: 0;`
			`padding: 0;`
			`}`
			`.webpackage.loader {`
			`height: 100%;`
			`}`

			`.webpackage.loader div:first-child {`
			`width: 200px;`
			`margin: 0 auto;`
			`display: flex;`
			`flex-direction: column;`
			`position: relative;`
			`top: 250px;`
			`}`

			`.webpackage.loader progress {`
			`width: 100%;`
			`}`

			`.webpackage.loader .percentage {`
			`font-family: monospace;`
			`text-align: center;`
			`width: 100%;`
			`}`
			`</style>`
src/: add src/surah.html 2022-10-31 19:27:21 +01:00			`</head>`
src/surah.html: add title to page Fix #4 2022-11-01 09:55:44 +01:00			`<body>`
add "WebPackage" The "WebPackage" object allows for scripts, stylesheets, fonts, images and other webpage assets to be downloaded for the page's primary content to use afterwards. 2022-11-12 22:55:53 +01:00			`<div class="webpackage loader">`
			`<div>`
			`<progress value="0" max="100"></progress>`
			`<span class="percentage">Loading...</span>`
			`</div>`
			`</div>`
Revise HTML markup, and stylesheets * Remove the 'AboutSurah' component: It is too simple to be worth being a component. * Prefer long-form CSS syntax over SCSS indentation: I think it is easier to read, although there's probably still a soft spot to find between the two. * Rename root class from 'surah' to 'root-box'. * Rename / revise other CSS class names. 2022-12-30 09:07:02 +01:00			`<div class="root-box" data-locale="<%= locale %>" data-surah-id="<%= surah_id %>"></div>`
add "WebPackage" The "WebPackage" object allows for scripts, stylesheets, fonts, images and other webpage assets to be downloaded for the page's primary content to use afterwards. 2022-11-12 22:55:53 +01:00			`<script src="/js/pages/TheSurahPage/package.js"></script>`
src/surah.html: add title to page Fix #4 2022-11-01 09:55:44 +01:00			`</body>`
src/: add src/surah.html 2022-10-31 19:27:21 +01:00			`</html>`