fix(front): 🐛 wrapping repo infos

This commit is contained in:
sxpphickat
2023-12-07 18:33:04 -03:00
parent 9d17f06732
commit 31bca044ea
2 changed files with 35 additions and 30 deletions

View File

@@ -40,22 +40,25 @@
<input type="color" id="bg-color" name="bg-color">
</div>
<input class="txt-input span-all" type="url" name="repo-url" id="repo-url" placeholder="Repository url">
<div class="list-of-items">
<label for="show-info">Show info:</label>
<div class="center-txt-vertically">
<input type="checkbox" id="issues" value="issues" name="show-info">
<label for="issues">Issues</label><br>
<div class="repo-wrapper">
<label for="repo-url">Repo-Info</label>
<input class="txt-input span-all" type="url" name="repo-url" id="repo-url" placeholder="Repository url">
<div class="list-of-items">
<label for="show-info">Show info:</label>
<div class="center-txt-vertically">
<input type="checkbox" id="issues" value="issues" name="show-info">
<label for="issues">Issues</label><br>
</div>
<div class="center-txt-vertically">
<input type="checkbox" id="prs" value="prs" name="show-info">
<label for="prs">Pull requests</label><br>
</div>
<div class="center-txt-vertically">
<input type="checkbox" id="contributors" value="contributors" name="show-info">
<label for="contributors">Contributors</label><br>
</div>
<br>
</div>
<div class="center-txt-vertically">
<input type="checkbox" id="prs" value="prs" name="show-info">
<label for="prs">Pull requests</label><br>
</div>
<div class="center-txt-vertically">
<input type="checkbox" id="contributors" value="contributors" name="show-info">
<label for="contributors">Contributors</label><br>
</div>
<br>
</div>
<div class="list-of-items">
<label for="deco">Event decoration:</label>
@@ -75,7 +78,6 @@
<input type="radio" id="pride" value="pride" name="deco">
<label for="pride">Pride month</label><br>
</div>
</div>
</form>
</div>

View File

@@ -44,8 +44,9 @@ body {
/* background-color: var(--options-bgc); */
color: white;
padding: 70px;
/* overflow: auto;
*/}
overflow: auto;
overflow-x: hidden;
}
input::placeholder {
color: var(--dark-txt-color);
@@ -55,6 +56,7 @@ input::placeholder {
label {
color: var(--dark-txt-color);
font-size: 1.5rem;
align-self: center;
}
h1 {
@@ -98,11 +100,6 @@ input:focus, select:focus, .style-layout > input[type="color"]:focus {
color: var(--dark-txt-color);
}
option {
border-radius: 10px;
}
input[type="radio"], input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
@@ -116,8 +113,6 @@ input[type="radio"], input[type="checkbox"] {
}
/*checkbox*/
input[type="radio"]:focus, input[type="checkbox"]:focus {
border-style: none;
box-shadow: none;
@@ -134,10 +129,6 @@ input[type="radio"]:not(:checked), input[type="checkbox"]:not(:checked) {
box-shadow: none;
}
label {
align-self: center;
}
.center-txt-vertically {
display: flex;
align-items: center;
@@ -159,7 +150,7 @@ label {
align-self: center;
}
.style-layout {
.style-layout, .repo-wrapper {
display: grid;
gap: 15px;
}
@@ -188,4 +179,16 @@ label {
background-color: var(--options-bgc);
overflow: auto;
overflow-x: hidden;
}
.repo-wrapper {
border: solid 1px var(--dark-txt-color);
border-radius: 6px;
padding: 1rem;
width: 20rem;
box-sizing: border-box;
}
.repo-wrapper > input {
width: 100%;
}