Update: Data and Tools Sections #855
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Hey @kshitijrajsharma this is a big one, lmk and I can walk you through if needed. |
|
Sure , Lets go through the meet we have tommorow |
…rt07/hotosm-website into update-data--tools-sections
_layouts/open-data-solutions.html
Outdated
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <script src="/js/tailwindcss-js-carrousel.js"></script> | ||
| <style> | ||
| /* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.sticky{position:sticky}.mb-2{margin-bottom:0.5rem}.mb-4{margin-bottom:1rem}.me-2{margin-inline-end:0.5rem}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-3{height:0.75rem}.h-4{height:1rem}.w-3{width:0.75rem}.w-4{width:1rem}.w-full{width:100%}.shrink-0{flex-shrink:0}.rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.list-disc{list-style-type:disc}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-3{gap:0.75rem}.space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.rounded-lg{border-radius:0.5rem}.rounded-t-xl{border-top-left-radius:0.75rem;border-top-right-radius:0.75rem}.border{border-width:1px}.border-b-0{border-bottom-width:0px}.border-t-0{border-top-width:0px}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.bg-blue-700{--tw-bg-opacity:1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.ps-5{padding-inline-start:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))}.hover\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.focus\:ring-4:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\:ring-gray-200:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(229 231 235 / var(--tw-ring-opacity))}@media (min-width: 768px){.md\:mb-0{margin-bottom:0px}.md\:me-4{margin-inline-end:1rem}.md\:flex{display:flex}}.rtl\:text-right:where([dir="rtl"], [dir="rtl"] *){text-align:right}@media (prefers-color-scheme: white){.dark\:border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81 / var(--tw-border-opacity))}.dark\:bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}.dark\:bg-gray-800{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.dark\:text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity))}.dark\:text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.dark\:text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.dark\:text-white{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.dark\:hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.dark\:hover\:bg-gray-800:hover{--tw-bg-opacity:1;background-color:rgb(155 155 155 / var(--tw-bg-opacity))}.dark\:hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.dark\:focus\:ring-gray-800:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(31 41 55 / var(--tw-ring-opacity))}} |
There was a problem hiding this comment.
I guess this css is not being used in the html , Can you verify ? if yes then may be we can move it to css file and import it
There was a problem hiding this comment.
It is being used for the hover effects -- sorry I forgot to put away. Moved out.
|
|
||
| <li class=" w-full " role="presentation"> | ||
| <a id="dashboard-styled-tab" data-tabs-target="#open-aerial-map" type="button" role="tab" aria-controls="dashboard" aria-selected="false" class="inline-flex items-center px-4 py-3 rounded-lg hover:text-gray-900 bg-gray-50 hover:bg-gray-100 w-full dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white"> | ||
| <svg width="10%" viewBox="0 0 80 48" style="padding-right: 2%;"><g fill="#D73F3F" fill-rule="evenodd"><path d="M37.02656,20.77496 C37.02656,20.29096 37.12976,19.85896 37.33616,19.48616 C37.54096,19.11176 37.81296,18.80696 38.15056,18.56376 C38.48656,18.32136 38.86496,18.13736 39.28576,18.01336 C39.70496,17.89016 40.12736,17.82776 40.55376,17.82776 C40.97856,17.82776 41.40256,17.89016 41.82336,18.01336 C42.24176,18.13736 42.62016,18.32136 42.95616,18.56376 C43.29456,18.80696 43.56576,19.11176 43.77216,19.48616 C43.97856,19.85896 44.08096,20.29096 44.08096,20.77496 L44.08096,27.14696 C44.08096,27.64136 43.97856,28.07496 43.77216,28.44216 C43.56576,28.81096 43.29456,29.11416 42.95616,29.35736 C42.62016,29.60136 42.24176,29.78616 41.82336,29.90856 C41.40256,30.03176 40.97856,30.09336 40.55376,30.09336 C40.12736,30.09336 39.70496,30.03176 39.28576,29.90856 C38.86496,29.78616 38.48656,29.60136 38.15056,29.35736 C37.81296,29.11416 37.54096,28.81096 37.33616,28.44216 C37.12976,28.07496 37.02656,27.64136 37.02656,27.14696 L37.02656,20.77496 Z M39.05136,27.15016 C39.05136,27.56536 39.28256,27.87496 39.56576,28.07176 C39.84736,28.27016 40.18096,28.37496 40.56576,28.37496 C40.94896,28.37496 41.28416,28.27016 41.56656,28.07176 C41.84736,27.87496 42.00816,27.56536 42.00816,27.15016 L42.00816,20.77816 C42.00816,20.36136 41.84736,20.05256 41.56656,19.85576 C41.28416,19.65816 40.94896,19.52536 40.56576,19.52536 C40.18096,19.52536 39.84736,19.65816 39.56576,19.85576 C39.28256,20.05256 39.05136,20.36136 39.05136,20.77816 L39.05136,27.15016 Z"/><polygon points="33.379 17.815 33.379 22.99 30.152 22.99 30.152 17.815 28.387 17.815 28.387 30.1 30.152 30.1 30.152 24.923 33.379 24.923 33.379 30.1 35.278 30.1 35.278 17.815"/><polygon points="52.431 17.815 45.426 17.815 45.426 19.622 48.015 19.622 47.985 30.1 49.847 30.1 49.847 19.622 52.431 19.622"/><path d="M65.42344,28.7668 L79.67944,28.7668 L71.15544,19.1684 L62.66904,9.57 L54.18104,0.000400000001 L11.53944,0.000400000001 L20.02584,9.57 L5.73784,9.57 L14.22584,19.1684 L14.29144,19.2332 L0.000239999999,19.2332 L8.52184,28.8316 L17.01304,38.43 L25.50024,48.0004 L68.14184,48.0004 L59.65064,38.43 L59.58824,38.3364 L73.87864,38.3364 L65.42344,28.7668 Z M39.83944,39.9492 C30.31864,39.9492 22.60104,32.8084 22.60104,24.0012 C22.60104,15.1908 30.31864,8.05 39.83944,8.05 C49.36104,8.05 57.07944,15.1908 57.07944,24.0012 C57.07944,32.8084 49.36104,39.9492 39.83944,39.9492 Z"/></g></svg> |
There was a problem hiding this comment.
yes, idk why for these I chose svg, should I go for instead?
_layouts/open-data-solutions.html
Outdated
| </div> | ||
|
|
||
|
|
||
| <!-- <div class="p-6 bg-gray-50 text-medium text-gray-500 dark:text-gray-400 dark:bg-gray-800 rounded-lg w-full" id="open-aerial-map" role="tabpanel" aria-labelledby="dashboard-tab"> |
There was a problem hiding this comment.
You can remove this comment
_layouts/open-data-solutions.html
Outdated
|
|
||
|
|
||
| <div class="p-6 rounded-lg w-full" id="mapbox" role="tabpanel" aria-labelledby="profile-tab"> | ||
| <h3 class="text-lg font-bold mb-2" style="color: #d63f3f; font-family: Barlow Condensed, sans-serif; font-weight: bold; text-transform: uppercase; letter-spacing: .045em;">Mapbox</h3> |
There was a problem hiding this comment.
Should mapbox be listed here ?
There was a problem hiding this comment.
no, they should not you are right -- deleted
_layouts/open-data-solutions.html
Outdated
| <li class=" w-full " role="presentation"> | ||
| <a id="dashboard-styled-tab" data-tabs-target="#raw-api" type="button" role="tab" aria-controls="dashboard" aria-selected="false" class="inline-flex items-center px-4 py-3 rounded-lg hover:text-gray-900 bg-gray-50 hover:bg-gray-100 w-full dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white"> | ||
| <svg width="10%" viewBox="0 0 80 48" style="padding-right: 2%;"><g fill="#D73F3F" fill-rule="evenodd"><path d="M37.02656,20.77496 C37.02656,20.29096 37.12976,19.85896 37.33616,19.48616 C37.54096,19.11176 37.81296,18.80696 38.15056,18.56376 C38.48656,18.32136 38.86496,18.13736 39.28576,18.01336 C39.70496,17.89016 40.12736,17.82776 40.55376,17.82776 C40.97856,17.82776 41.40256,17.89016 41.82336,18.01336 C42.24176,18.13736 42.62016,18.32136 42.95616,18.56376 C43.29456,18.80696 43.56576,19.11176 43.77216,19.48616 C43.97856,19.85896 44.08096,20.29096 44.08096,20.77496 L44.08096,27.14696 C44.08096,27.64136 43.97856,28.07496 43.77216,28.44216 C43.56576,28.81096 43.29456,29.11416 42.95616,29.35736 C42.62016,29.60136 42.24176,29.78616 41.82336,29.90856 C41.40256,30.03176 40.97856,30.09336 40.55376,30.09336 C40.12736,30.09336 39.70496,30.03176 39.28576,29.90856 C38.86496,29.78616 38.48656,29.60136 38.15056,29.35736 C37.81296,29.11416 37.54096,28.81096 37.33616,28.44216 C37.12976,28.07496 37.02656,27.64136 37.02656,27.14696 L37.02656,20.77496 Z M39.05136,27.15016 C39.05136,27.56536 39.28256,27.87496 39.56576,28.07176 C39.84736,28.27016 40.18096,28.37496 40.56576,28.37496 C40.94896,28.37496 41.28416,28.27016 41.56656,28.07176 C41.84736,27.87496 42.00816,27.56536 42.00816,27.15016 L42.00816,20.77816 C42.00816,20.36136 41.84736,20.05256 41.56656,19.85576 C41.28416,19.65816 40.94896,19.52536 40.56576,19.52536 C40.18096,19.52536 39.84736,19.65816 39.56576,19.85576 C39.28256,20.05256 39.05136,20.36136 39.05136,20.77816 L39.05136,27.15016 Z"/><polygon points="33.379 17.815 33.379 22.99 30.152 22.99 30.152 17.815 28.387 17.815 28.387 30.1 30.152 30.1 30.152 24.923 33.379 24.923 33.379 30.1 35.278 30.1 35.278 17.815"/><polygon points="52.431 17.815 45.426 17.815 45.426 19.622 48.015 19.622 47.985 30.1 49.847 30.1 49.847 19.622 52.431 19.622"/><path d="M65.42344,28.7668 L79.67944,28.7668 L71.15544,19.1684 L62.66904,9.57 L54.18104,0.000400000001 L11.53944,0.000400000001 L20.02584,9.57 L5.73784,9.57 L14.22584,19.1684 L14.29144,19.2332 L0.000239999999,19.2332 L8.52184,28.8316 L17.01304,38.43 L25.50024,48.0004 L68.14184,48.0004 L59.65064,38.43 L59.58824,38.3364 L73.87864,38.3364 L65.42344,28.7668 Z M39.83944,39.9492 C30.31864,39.9492 22.60104,32.8084 22.60104,24.0012 C22.60104,15.1908 30.31864,8.05 39.83944,8.05 C49.36104,8.05 57.07944,15.1908 57.07944,24.0012 C57.07944,32.8084 49.36104,39.9492 39.83944,39.9492 Z"/></g></svg> | ||
| Raw API |
_layouts/product-pages.html
Outdated
|
|
||
|
|
||
|
|
||
| <!-- <div class="program-body" style="padding-top: 1px"> |
There was a problem hiding this comment.
Cleanup needed for the comments
|
Thanks for the review @kshitijrajsharma -- addressed all your comments. Thank you again for taking the time 🌟 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes:
Complete revamp of the Tools and Data section based on the wireframes for the upcoming website. The idea is to use the current website to test these wireframes, have time to adapt them and make the transition to the new website easier.
New pages within Tools and Data:
Screenshots of the change: