making the edit and upload pages responsive

404mike · Sep 3, 2024 · 7e48ae8 · 7e48ae8
1 parent b6992b0
commit 7e48ae8
Show file tree

Hide file tree

Showing 10 changed files with 333 additions and 60 deletions.
diff --git a/dist/main.css b/dist/main.css
diff --git a/dist/pages/accordion.html b/dist/pages/accordion.html
@@ -199,11 +199,24 @@
  </span>
  </label>
  <div class="row">
- <div class="col-10">
+ <div class="
+ col-xxl-10
+ col-xl-10
+ col-lg-12
+ col-md-12
+ col-sm-12
+ col-12
+ ">
  <input type="text" class="form-control" id="contribute-english-title" placeholder="Short title">
  <div id="englishTitleHelp" class="form-text contribute-help-issue"></div>
  </div>
- <div class="col-2">
+ <div class="
+ col-xxl-2
+ col-xl-2
+ col-lg-3
+ col-md-3
+ col-sm-3
+ ">
  <button class="btn btn-secondary w-100 alternative-language" type="button"
  id="contribute-title-form-english">Cymraeg</button>
  </div>
@@ -213,10 +226,23 @@
  <div class="mb-3 d-none" id="contribute-title-form-welsh">
  <label for="contribute-welsh-title" class="form-label fs-5">Cymraeg</label>
  <div class="row">
- <div class="col-10">
+ <div class="
+ col-xxl-10
+ col-xl-10
+ col-lg-12
+ col-md-12
+ col-sm-12
+ col-12
+ ">
  <input type="text" class="form-control" id="contribute-welsh-title" placeholder="Short title">
  </div>
- <div class="col-2">
+ <div class=" 
+ col-xxl-2
+ col-xl-2
+ col-lg-3
+ col-md-3
+ col-sm-3
+ ">
  <button class="btn btn-secondary w-100 translate-button" id="translate-title-welsh"
  type="button">Translate</button>
  </div>
@@ -239,13 +265,26 @@
  </span>
  </label>
  <div class="row">
- <div class="col-10">
+ <div class="
+ col-xxl-10
+ col-xl-10
+ col-lg-12
+ col-md-12
+ col-sm-12
+ col-12
+ ">
  <textarea class="form-control" id="contribute-english-description"
  placeholder="A good description will include details like: who, what, where and when"
  rows="7"></textarea>
  <div id="englishDescriptionHelp" class="form-text contribute-help-issue"></div>
  </div>
- <div class="col-2">
+ <div class="
+ col-xxl-2
+ col-xl-2
+ col-lg-3
+ col-md-3
+ col-sm-3
+ ">
  <button class="btn btn-secondary w-100 alternative-language" type="button"
  id="contribute-description-form-english">Cymraeg</button>
  </div>
@@ -255,12 +294,25 @@
  <div class="mb-3 d-none" id="contribute-description-form-welsh">
  <label for="translate-description-welsh" class="form-label fs-5">Cymraeg</label>
  <div class="row">
- <div class="col-10">
+ <div class="
+ col-xxl-10
+ col-xl-10
+ col-lg-12
+ col-md-12
+ col-sm-12
+ col-12
+ ">
  <textarea class="form-control" id="contribute-welsh-description"
  placeholder="A good description will include details like: who, what, where and when"
  rows="7"></textarea>
  </div>
- <div class="col-2">
+ <div class="
+ col-xxl-2
+ col-xl-2
+ col-lg-3
+ col-md-3
+ col-sm-3
+ ">
  <button class="btn btn-secondary w-100 translate-button" id="translate-description-welsh"
  type="button">Translate</button>
  </div>
@@ -326,11 +378,24 @@
  Link
  </label>
  <div class="row">
- <div class="col-10">
+ <div class="
+ col-xxl-10
+ col-xl-10
+ col-lg-12
+ col-md-12
+ col-sm-12
+ col-12
+ ">
  <input type="text" class="form-control" id="contribute-english-link"
  placeholder="Link if your item is also on another website">
  </div>
- <div class="col-2">
+ <div class="
+ col-xxl-2
+ col-xl-2
+ col-lg-3
+ col-md-3
+ col-sm-3
+ ">
  <button class="btn btn-secondary w-100 alternative-language" type="button"
  id="contribute-link-form-english">Cymraeg</button>
  </div>
@@ -340,7 +405,14 @@
  <div class="mb-3 d-none" id="contribute-link-form-welsh">
  <label for="contribute-welsh-link" class="form-label fs-5">Cymraeg</label>
  <div class="row">
- <div class="col-10">
+ <div class="
+ col-xxl-10
+ col-xl-10
+ col-lg-12
+ col-md-12
+ col-sm-12
+ col-12
+ ">
  <input type="text" class="form-control" id="contribute-welsh-link"
  placeholder="Link if your item is also on another website">
  </div>

diff --git a/dist/pages/edit.html b/dist/pages/edit.html
@@ -180,7 +180,14 @@
 </nav>
 <div class="container text-start" id="contribute-form" role="main">
  <div class="row justify-content-center">
- <div class="col-8">
+ <div class="
+ col-xxl-8
+ col-xl-8
+ col-lg-8
+ col-md-10
+ col-sm-12
+ col-12
+ ">
 
  <div>
  <img src="https://www.peoplescollection.wales/sites/default/files/styles/edit_node_thumb_larger/public/images/2014/February/GTJ11835_2.jpg?itok=v-XMza94"
@@ -213,11 +220,24 @@
  </span>
  </label>
  <div class="row">
- <div class="col-10">
+ <div class="
+ col-xxl-10
+ col-xl-10
+ col-lg-12
+ col-md-12
+ col-sm-12
+ col-12
+ ">
  <input type="text" class="form-control" id="contribute-english-title" placeholder="Short title">
  <div id="englishTitleHelp" class="form-text contribute-help-issue"></div>
  </div>
- <div class="col-2">
+ <div class="
+ col-xxl-2
+ col-xl-2
+ col-lg-3
+ col-md-3
+ col-sm-3
+ ">
  <button class="btn btn-secondary w-100 alternative-language" type="button"
  id="contribute-title-form-english">Cymraeg</button>
  </div>
@@ -227,10 +247,23 @@
  <div class="mb-3 d-none" id="contribute-title-form-welsh">
  <label for="contribute-welsh-title" class="form-label fs-5">Cymraeg</label>
  <div class="row">
- <div class="col-10">
+ <div class="
+ col-xxl-10
+ col-xl-10
+ col-lg-12
+ col-md-12
+ col-sm-12
+ col-12
+ ">
  <input type="text" class="form-control" id="contribute-welsh-title" placeholder="Short title">
  </div>
- <div class="col-2">
+ <div class=" 
+ col-xxl-2
+ col-xl-2
+ col-lg-3
+ col-md-3
+ col-sm-3
+ ">
  <button class="btn btn-secondary w-100 translate-button" id="translate-title-welsh"
  type="button">Translate</button>
  </div>
@@ -253,13 +286,26 @@
  </span>
  </label>
  <div class="row">
- <div class="col-10">
+ <div class="
+ col-xxl-10
+ col-xl-10
+ col-lg-12
+ col-md-12
+ col-sm-12
+ col-12
+ ">
  <textarea class="form-control" id="contribute-english-description"
  placeholder="A good description will include details like: who, what, where and when"
  rows="7"></textarea>
  <div id="englishDescriptionHelp" class="form-text contribute-help-issue"></div>
  </div>
- <div class="col-2">
+ <div class="
+ col-xxl-2
+ col-xl-2
+ col-lg-3
+ col-md-3
+ col-sm-3
+ ">
  <button class="btn btn-secondary w-100 alternative-language" type="button"
  id="contribute-description-form-english">Cymraeg</button>
  </div>
@@ -269,12 +315,25 @@
  <div class="mb-3 d-none" id="contribute-description-form-welsh">
  <label for="translate-description-welsh" class="form-label fs-5">Cymraeg</label>
  <div class="row">
- <div class="col-10">
+ <div class="
+ col-xxl-10
+ col-xl-10
+ col-lg-12
+ col-md-12
+ col-sm-12
+ col-12
+ ">
  <textarea class="form-control" id="contribute-welsh-description"
  placeholder="A good description will include details like: who, what, where and when"
  rows="7"></textarea>
  </div>
- <div class="col-2">
+ <div class="
+ col-xxl-2
+ col-xl-2
+ col-lg-3
+ col-md-3
+ col-sm-3
+ ">
  <button class="btn btn-secondary w-100 translate-button" id="translate-description-welsh"
  type="button">Translate</button>
  </div>
@@ -340,11 +399,24 @@
  Link
  </label>
  <div class="row">
- <div class="col-10">
+ <div class="
+ col-xxl-10
+ col-xl-10
+ col-lg-12
+ col-md-12
+ col-sm-12
+ col-12
+ ">
  <input type="text" class="form-control" id="contribute-english-link"
  placeholder="Link if your item is also on another website">
  </div>
- <div class="col-2">
+ <div class="
+ col-xxl-2
+ col-xl-2
+ col-lg-3
+ col-md-3
+ col-sm-3
+ ">
  <button class="btn btn-secondary w-100 alternative-language" type="button"
  id="contribute-link-form-english">Cymraeg</button>
  </div>
@@ -354,7 +426,14 @@
  <div class="mb-3 d-none" id="contribute-link-form-welsh">
  <label for="contribute-welsh-link" class="form-label fs-5">Cymraeg</label>
  <div class="row">
- <div class="col-10">
+ <div class="
+ col-xxl-10
+ col-xl-10
+ col-lg-12
+ col-md-12
+ col-sm-12
+ col-12
+ ">
  <input type="text" class="form-control" id="contribute-welsh-link"
  placeholder="Link if your item is also on another website">
  </div>