Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature - ui improvements #74

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Feature - ui improvements #74

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8750561
ui improvements
YashasaveeKesarwani99 Jun 27, 2023
d624ac8
code cleaning and ui changes
YashasaveeKesarwani99 Jun 28, 2023
eda8352
more ui changes
YashasaveeKesarwani99 Jun 29, 2023
ec76c8c
sidebar updated
YashasaveeKesarwani99 Jun 30, 2023
1e30f0e
search bar and location button ui improvements
YashasaveeKesarwani99 Jul 3, 2023
557697b
search bar styles changed
YashasaveeKesarwani99 Jul 3, 2023
deb0424
basemap styles changed
YashasaveeKesarwani99 Jul 5, 2023
75d9a7b
Merge pull request #1 from YashasaveeKesarwani99/feature/ui-improvements
YashasaveeKesarwani99 Jul 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
more ui changes
  • Loading branch information
@YashasaveeKesarwani99
YashasaveeKesarwani99 committed Jun 29, 2023
commit eda8352ccb4d475bbb5bd37d7e44936dc161929a
41 changes: 25 additions & 16 deletions src/components/main-app/sidebar-wrapper/output-box.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,33 @@ import * as JSONPrettyMon from 'react-json-pretty/dist/acai';

const OutputBox = ({ handleColorFormatChange, text }) => {
return (
<div>
<select
id="color-format"
defaultValue="rgba"
onChange={event => handleColorFormatChange(event)}
>
<option value="hex">HEX</option>
<option value="rgba">RGBA</option>
<option value="hsla">HSLA</option>
</select>
{/* <CopyToClipboard text={text}>
<div className="input-group">
<div className="logo-background">
<img
className=""
src={`${window.location.origin}/assets/svg/code.svg`}
alt="globe-asia"
/>
</div>
<div className="sub-input-group">
<select
id="color-format"
defaultValue="rgba"
onChange={event => handleColorFormatChange(event)}
>
<option value="hex">HEX</option>
<option value="rgba">RGBA</option>
<option value="hsla">HSLA</option>
</select>
{/* <CopyToClipboard text={text}>
<button className="copy-btn">Copy</button>
</CopyToClipboard> */}
<JSONPretty
id="json-pretty"
data={text}
theme={JSONPrettyMon}
></JSONPretty>
<JSONPretty
id="json-pretty"
data={text}
theme={JSONPrettyMon}
></JSONPretty>
</div>
</div>
);
};
Expand Down
26 changes: 20 additions & 6 deletions src/sass/_app.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.sidebar
width: 80%
height: 160px
height: 200px
position: fixed
background: white
bottom: 4rem
Expand All @@ -10,12 +10,16 @@
box-shadow: 4px 0px 15px #00000029
overflow-y: auto
border-radius: 15px
display: flex
align-items: center

.sidebar-wrapper
display: grid
grid-template-columns: 1fr 1fr 1fr
grid-template-columns: 1.3fr 1fr 1fr
grid-template-rows: 100%
grid-gap: 10px
padding: 20px
height: 90%

hr
margin-bottom: 30px
Expand Down Expand Up @@ -177,8 +181,15 @@
font-size: 15px
border-radius: 6px

#json-pretty
height: 90%
overflow: auto


.__json-pretty__
margin: 0

#json-pretty > pre
height: 13rem
padding: 0.5rem
overflow: auto

Expand All @@ -190,10 +201,10 @@
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1)

#color-format
background: #ffffff !important
color: $label-color !important
border: none
border-radius: 6px
color: #fff
padding: 4px
font-size: $label-size

#color-format:hover
cursor: pointer
Expand Down Expand Up @@ -233,6 +244,8 @@
.sidebar-urls
display: flex
flex-direction: column
height: 100%
justify-content: space-between
gap: 10px

.label
Expand Down Expand Up @@ -260,6 +273,7 @@

.sub-input-group
width: 100%
height: 100%

// commenting until I do mobile implementation
// @media only screen and (max-width: 1440px)
Expand Down
1 change: 1 addition & 0 deletions src/sass/_global.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
*
outline: none
font-family: 'Jost', sans-serif;
box-sizing: border-box

body, html
padding: 0
Expand Down