Skip to content

Commit a63fa15

Browse files
mslaursenmslaursen
authored
update(Frontend v2): Modal stylings (#101)
1 parent 8ec508c commit a63fa15

9 files changed

Lines changed: 320 additions & 154 deletions

File tree

‎fastapi_forge/static/assets/index-DDO4cKLe.js‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎fastapi_forge/static/assets/index-DuOkOUCX.js‎

Lines changed: 46 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎fastapi_forge/static/assets/index-TXLObeWa.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎fastapi_forge/static/assets/index-oV0aoT2I.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎fastapi_forge/static/index.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="">
33
<head>
4+
<link rel="preconnect" href="https://fonts.googleapis.com">
5+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
6+
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
47
<meta charset="UTF-8">
58
<link rel="icon" href="/favicon.ico">
69
<meta name="viewport" content="width=device-width, initial-scale=1.0">
710
<title>Vite App</title>
8-
<script type="module" crossorigin src="/assets/index-DDO4cKLe.js"></script>
9-
<link rel="stylesheet" crossorigin href="/assets/index-TXLObeWa.css">
11+
<script type="module" crossorigin src="/assets/index-DuOkOUCX.js"></script>
12+
<link rel="stylesheet" crossorigin href="/assets/index-oV0aoT2I.css">
1013
</head>
1114
<body>
1215
<div id="app"></div>
16+
<div id="modal"></div>
1317
</body>
1418
</html>

‎frontend/src/components/modal/AddFieldModal.vue‎

Lines changed: 26 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
22
<main class="field-modal-container">
3-
<div class="grid-2x2">
3+
<div class="input-container">
44
<div class="input-group">
5-
<label class="field-label">Field Name:</label>
5+
<label class="field-label">Field name</label>
66
<input class="field-input" v-model="fieldName" type="text" />
77
</div>
88

99
<div class="input-group">
10-
<label class="field-label">Type:</label>
10+
<label class="field-label">Type</label>
1111
<select class="field-select" v-model="type">
1212
<option disabled value="">-- Select type --</option>
1313
<option value="String">String</option>
@@ -20,23 +20,21 @@
2020
</div>
2121

2222
<div class="input-group">
23-
<label class="field-label">Default Value:</label>
23+
<label class="field-label">Default value</label>
2424
<input class="field-input" v-model="defaultValue" type="text" />
2525
</div>
26-
27-
<div class="input-group checkbox-inline">
28-
<label class="field-label">Primary Key:</label>
29-
<input type="checkbox" v-model="isPrimaryKey" />
30-
</div>
3126
</div>
3227

3328
<div class="checkbox-group">
29+
<label><input type="checkbox" v-model="isPrimaryKey" /> Primary key</label>
3430
<label><input type="checkbox" v-model="isNullable" /> Nullable</label>
3531
<label><input type="checkbox" v-model="isUnique" /> Unique</label>
3632
<label><input type="checkbox" v-model="isIndex" /> Index</label>
3733
</div>
3834

39-
<button class="save-field-btn" @click="saveField">Save</button>
35+
<div class="action-group">
36+
<button class="save-field-btn" @click="saveField">Save</button>
37+
</div>
4038
</main>
4139
</template>
4240

@@ -71,7 +69,6 @@ const saveField = () => {
7169
isUnique: isUnique.value,
7270
isIndex: isIndex.value,
7371
})
74-
7572
modalStore.close()
7673
}
7774
</script>
@@ -81,66 +78,53 @@ const saveField = () => {
8178
display: flex;
8279
flex-direction: column;
8380
gap: 1rem;
84-
border: 2px solid black;
8581
padding: 1rem;
86-
box-shadow: 4px 4px 0px black;
87-
background-color: #fff;
8882
}
8983
90-
.grid-2x2 {
91-
display: grid;
92-
grid-template-columns: 1fr 1fr;
84+
.input-container {
85+
display: flex;
86+
flex-direction: column;
9387
gap: 1rem;
9488
}
9589
9690
.input-group {
9791
display: flex;
9892
flex-direction: column;
99-
}
100-
101-
.checkbox-inline {
102-
flex-direction: row;
103-
align-items: center;
104-
gap: 0.5rem;
93+
gap: 0.15rem;
10594
}
10695
10796
.field-label {
10897
font-weight: bold;
109-
margin-bottom: 0.25rem;
98+
margin-bottom: 5px;
11099
}
111100
112101
.field-input,
113102
.field-select {
114103
border: 2px solid black;
115-
border-radius: 4px;
116-
padding: 0.5rem;
117-
box-shadow: 3px 3px 0px black;
118-
background-color: var(--color-background);
119-
transition:
120-
transform 0.1s ease-in-out,
121-
box-shadow 0.1s ease-in-out;
122-
}
123-
124-
.field-input:focus,
125-
.field-select:focus {
126-
outline: none;
127-
transform: translate(2px, 2px);
128-
box-shadow: none;
104+
border-radius: 6px;
105+
padding: 0.6rem;
106+
background-color: white;
129107
}
130108
131109
.checkbox-group {
132110
display: flex;
133-
justify-content: space-between;
134-
gap: 1rem;
111+
flex-direction: column;
112+
gap: 0.5rem;
135113
font-weight: bold;
136114
}
137115
116+
.action-group {
117+
gap: 0.5rem;
118+
margin-top: 2rem;
119+
display: flex;
120+
flex-direction: column;
121+
}
122+
138123
.save-field-btn {
139-
align-self: flex-end;
124+
width: 100%;
140125
padding: 0.5rem 1rem;
141126
border: 2px solid black;
142127
border-radius: 4px;
143-
font-weight: bold;
144128
background-color: var(--color-success);
145129
box-shadow: 3px 3px 0px black;
146130
transition:

‎frontend/src/components/modal/AddRelationModal.vue‎

Lines changed: 26 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
22
<main class="relation-container">
3-
<div class="grid-2x2">
3+
<div class="input-container">
44
<div class="input-group">
5-
<label class="relation-label">Field Name:</label>
5+
<label class="relation-label">Field name</label>
66
<input class="relation-input" v-model="fieldName" type="text" />
77
</div>
88

99
<div class="input-group">
10-
<label class="relation-label">Target Model:</label>
10+
<label class="relation-label">Target model</label>
1111
<select class="relation-select" v-model="selectedNodeId">
1212
<option disabled value="">-- Select a model --</option>
1313
<option v-for="node in filteredNodes" :key="node.id" :value="node.id">
@@ -17,7 +17,7 @@
1717
</div>
1818

1919
<div class="input-group">
20-
<label class="relation-label">OnDelete:</label>
20+
<label class="relation-label">OnDelete</label>
2121
<select class="relation-select" v-model="onDelete">
2222
<option disabled value="">-- Select behavior --</option>
2323
<option value="CASCADE">CASCADE</option>
@@ -26,7 +26,7 @@
2626
</div>
2727

2828
<div class="input-group">
29-
<label class="relation-label">Back Populates:</label>
29+
<label class="relation-label">Back populates</label>
3030
<input class="relation-input" v-model="backPopulates" type="text" />
3131
</div>
3232
</div>
@@ -37,7 +37,9 @@
3737
<label><input type="checkbox" v-model="indexed" /> Index</label>
3838
</div>
3939

40-
<button class="save-relation-btn" @click="saveSelect">Save</button>
40+
<div class="action-group">
41+
<button class="save-relation-btn" @click="saveSelect">Save</button>
42+
</div>
4143
</main>
4244
</template>
4345

@@ -65,7 +67,6 @@ const filteredNodes = computed(() => projectStore.nodes.filter((node) => node.id
6567
6668
const saveSelect = () => {
6769
if (!selectedNodeId.value || !fieldName.value) return
68-
6970
projectStore.addRelation(props.id, selectedNodeId.value, {
7071
fieldName: fieldName.value,
7172
targetModel: selectedNodeId.value,
@@ -75,7 +76,6 @@ const saveSelect = () => {
7576
isUnique: unique.value,
7677
isIndex: indexed.value,
7778
})
78-
7979
modalStore.close()
8080
}
8181
</script>
@@ -85,60 +85,53 @@ const saveSelect = () => {
8585
display: flex;
8686
flex-direction: column;
8787
gap: 1rem;
88-
border: 2px solid black;
8988
padding: 1rem;
90-
box-shadow: 4px 4px 0px black;
91-
background-color: #fff;
9289
}
9390
94-
.grid-2x2 {
95-
display: grid;
96-
grid-template-columns: 1fr 1fr;
91+
.input-container {
92+
display: flex;
93+
flex-direction: column;
9794
gap: 1rem;
9895
}
9996
10097
.input-group {
10198
display: flex;
10299
flex-direction: column;
100+
gap: 0.15rem;
103101
}
104102
105103
.relation-label {
106104
font-weight: bold;
107-
margin-bottom: 0.25rem;
105+
margin-bottom: 5px;
108106
}
109107
110108
.relation-input,
111109
.relation-select {
112110
border: 2px solid black;
113-
border-radius: 4px;
114-
padding: 0.5rem;
115-
box-shadow: 3px 3px 0px black;
116-
background-color: var(--color-background);
117-
transition:
118-
transform 0.1s ease-in-out,
119-
box-shadow 0.1s ease-in-out;
120-
}
121-
122-
.relation-input:focus,
123-
.relation-select:focus {
124-
outline: none;
125-
transform: translate(2px, 2px);
126-
box-shadow: none;
111+
border-radius: 6px;
112+
padding: 0.6rem;
113+
background-color: white;
127114
}
128115
129116
.checkbox-group {
130117
display: flex;
131-
justify-content: space-between;
132-
gap: 1rem;
118+
flex-direction: column;
119+
gap: 0.5rem;
133120
font-weight: bold;
134121
}
135122
123+
.action-group {
124+
gap: 0.5rem;
125+
margin-top: 2rem;
126+
display: flex;
127+
flex-direction: column;
128+
}
129+
136130
.save-relation-btn {
137-
align-self: flex-end;
131+
width: 100%;
138132
padding: 0.5rem 1rem;
139133
border: 2px solid black;
140134
border-radius: 4px;
141-
font-weight: bold;
142135
background-color: var(--color-success);
143136
box-shadow: 3px 3px 0px black;
144137
transition:

‎frontend/src/components/modal/RenameNodeModal.vue‎

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
<template>
22
<main class="rename-node-modal">
3-
<div class="input-group">
4-
<label class="field-label">New Node ID:</label>
5-
<input class="field-input" v-model="newNodeId" type="text" />
3+
<div class="input-container">
4+
<div class="input-group">
5+
<label class="field-label">New model name</label>
6+
<input class="field-input" v-model="newNodeId" type="text" />
7+
</div>
68
</div>
79

8-
<button class="save-btn" @click="rename">Rename</button>
10+
<div class="action-group">
11+
<button class="save-btn" @click="rename">Rename</button>
12+
</div>
913
</main>
1014
</template>
1115

@@ -38,13 +42,12 @@ const rename = () => {
3842
.rename-node-modal {
3943
display: flex;
4044
flex-direction: column;
41-
gap: 1rem;
4245
padding: 1rem;
43-
border: 2px solid black;
44-
box-shadow: 4px 4px 0 black;
45-
background-color: #fff;
46-
width: 100%;
47-
max-width: 400px;
46+
}
47+
48+
.input-container {
49+
display: flex;
50+
flex-direction: column;
4851
}
4952
5053
.input-group {
@@ -54,34 +57,29 @@ const rename = () => {
5457
5558
.field-label {
5659
font-weight: bold;
57-
margin-bottom: 0.25rem;
60+
margin-bottom: 5px;
5861
}
5962
6063
.field-input {
6164
border: 2px solid black;
62-
border-radius: 4px;
63-
padding: 0.5rem;
64-
background-color: var(--color-background);
65-
box-shadow: 3px 3px 0 black;
66-
transition:
67-
transform 0.1s ease-in-out,
68-
box-shadow 0.1s ease-in-out;
65+
border-radius: 6px;
66+
padding: 0.6rem;
67+
background-color: white;
6968
}
7069
71-
.field-input:focus {
72-
outline: none;
73-
transform: translate(2px, 2px);
74-
box-shadow: none;
70+
.action-group {
71+
margin-top: 0.5rem;
72+
display: flex;
73+
flex-direction: column;
7574
}
7675
7776
.save-btn {
78-
align-self: flex-end;
77+
width: 100%;
7978
padding: 0.5rem 1rem;
8079
border: 2px solid black;
8180
border-radius: 4px;
82-
font-weight: bold;
8381
background-color: var(--color-success);
84-
box-shadow: 3px 3px 0 black;
82+
box-shadow: 3px 3px 0px black;
8583
transition:
8684
transform 0.1s ease-in-out,
8785
box-shadow 0.1s ease-in-out;

0 commit comments

Comments
 (0)