adam/vscode-front-matter
1
0
Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-08-07 09:23:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

Optimized styling for data dashboard

Browse Source
This commit is contained in:
Elio Struyf
2022-01-19 12:59:25 +01:00
parent 42cc53cefc
commit 7d6d60039e
3 changed files with 177 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+2
View File
@@ -7,6 +7,7 @@
- [#193](https://github.com/estruyf/vscode-front-matter/issues/193): Support added for editing data files.
- [#197](https://github.com/estruyf/vscode-front-matter/issues/197): Support for multi-dimensional content type fields on content creation and editing.
- [#225](https://github.com/estruyf/vscode-front-matter/issues/225): Placeholder support for front matter field values (template and content type).
- [#226](https://github.com/estruyf/vscode-front-matter/issues/226): Ability to specify the local server start command and trigger it from the UI.
- [#227](https://github.com/estruyf/vscode-front-matter/issues/227): Specify the file types to support with the new `frontMatter.content.supportedFileTypes` setting.
- [#228](https://github.com/estruyf/vscode-front-matter/issues/228): Show bulk button actions in panel and dashboard view.
- [#231](https://github.com/estruyf/vscode-front-matter/issues/231): Once you authenticate via GitHub as a supporter, the support links will be hidden from the UI.
@@ -15,6 +16,7 @@
- Added default field value for content type fields
- HMR support for panel webview development
- [#187](https://github.com/estruyf/vscode-front-matter/issues/187): Svelte support with the [#227](https://github.com/estruyf/vscode-front-matter/issues/227) features has been added.
- [#198](https://github.com/estruyf/vscode-front-matter/issues/198): Additional media sort options (alt, caption, and size).
- [#230](https://github.com/estruyf/vscode-front-matter/issues/230): JSON front matter support added.
package.json
+4 -1
View File
@@ -523,7 +523,10 @@
"markdownDescription": "Specify the ID of your static site generator or framework you are using for your website. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.framework.id)"
},
"frontMatter.framework.startCommand": {
"type": ["string", "null"],
"type": [
"string",
"null"
],
"default": null,
"markdownDescription": "Specify the command you want to use to start your static site generator or framework. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.framework.startcommand)"
},
src/dashboardWebView/styles.css
+171 -3
View File
@@ -46,7 +46,7 @@
}
input {
@apply w-full text-vulcan-500;
@apply w-full text-vulcan-500 px-2 py-1;
&::placeholder {
@apply text-gray-500;
@@ -56,13 +56,22 @@
.ant-form-item-has-error .ant-form-item-control-input {
@apply relative;
}
.ant-form-item-has-error {
label {
&::after {
content: ' *';
@apply text-red-400;
}
}
}
.ant-form-item-has-error input {
@apply border border-red-400;
}
.ant-form-item-has-error .ant-form-item-children-icon {
@apply text-red-400 absolute right-1 top-2;
@apply text-red-400 absolute right-1 top-1;
svg {
@apply w-4 h-4;
@@ -103,7 +112,158 @@
.fields {}
.ant-list.ant-list-bordered {
@apply border-t border-gray-300;
@apply border border-gray-300;
}
.ant-btn-dashed {
@apply border border-gray-300 border-dashed flex items-center justify-center py-1 mt-2;
&:hover {
@apply text-teal-900 border-teal-900;
}
}
.ant-input:hover, .ant-input-focused, .ant-input:focus {
@apply border-teal-600;
}
.ant-btn-ghost:focus, .ant-btn-ghost:hover {
@apply text-teal-600 border-teal-700;
}
.ant-switch-checked {
@apply bg-teal-500;
}
.ant-switch {
@apply bg-gray-400;
margin: 0;
padding: 0;
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5715;
list-style: none;
font-feature-settings: "tnum";
position: relative;
display: inline-block;
box-sizing: border-box;
min-width: 44px;
height: 22px;
line-height: 22px;
vertical-align: middle;
border: 0;
border-radius: 100px;
cursor: pointer;
transition: all .2s;
user-select: none;
&.ant-switch-checked {
@apply bg-teal-500;
.ant-switch-handle {
left: calc(100% - 20px);
}
}
.ant-switch-handle {
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
transition: all .2s ease-in-out;
&::before {
position: absolute;
inset: 0;
background-color: #fff;
border-radius: 9px;
box-shadow: 0 2px 4px #00230b33;
transition: all .2s ease-in-out;
content: "";
}
}
.ant-switch-inner {
display: block;
margin: 0 7px 0 25px;
color: #fff;
font-size: 12px;
transition: margin .2s;
svg {
display: none;
}
}
}
.ant-input-number {
@apply border;
box-sizing: border-box;
font-variant: tabular-nums;
list-style: none;
font-feature-settings: "tnum";
position: relative;
width: 100%;
min-width: 0;
color: #000000d9;
font-size: 14px;
line-height: 1.5715;
background-color: #fff;
background-image: none;
transition: all .3s;
display: inline-block;
width: 90px;
margin: 0;
padding: 0;
&.ant-input-number-focused {
@apply border-teal-600;
}
}
.ant-input-number-handler {
position: relative;
display: block;
width: 100%;
height: 50%;
overflow: hidden;
color: #00000073;
font-weight: 700;
line-height: 0;
text-align: center;
border-left: 1px solid #d9d9d9;
transition: all .1s linear;
}
.ant-input-number-handler-wrap {
position: absolute;
top: 0;
right: 0;
width: 22px;
height: 100%;
background: #fff;
opacity: 0;
transition: opacity .24s linear .1s;
}
.ant-input-number-input {
@apply px-2 py-1;
width: 100%;
height: 30px;
text-align: left;
background-color: transparent;
border: 0;
outline: 0;
transition: all .3s linear;
appearance: textfield !important;
}
.ant-input-number:hover .ant-input-number-handler-wrap, .ant-input-number-focused .ant-input-number-handler-wrap {
opacity: 1;
}
}
@@ -127,4 +287,12 @@
.ant-list.ant-list-bordered {
@apply border-vulcan-100;
}
.ant-btn-dashed {
@apply border-vulcan-50;
&:hover {
@apply text-teal-400 border-teal-900;
}
}
}