yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated HTML for settings dashboard to use a grid of uui-box's to be more visually appealing

Browse Source
This commit is contained in:
Warren Buckley
2023-01-12 12:25:37 +00:00
parent 856682a849
commit 1f4b880e71
1 changed files with 53 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/settings-welcome/dashboard-settings-welcome.element.ts
View File

@@ -2,24 +2,64 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('umb-dashboard-settings-welcome')
export class UmbDashboardSettingsWelcomeElement extends LitElement {
static styles = [UUITextStyles, css``];
static styles = [UUITextStyles, css`
#settings-dashboard {
display: grid;
grid-gap:var(--uui-size-7);
grid-template-columns: repeat(3, 1fr);
}
@media(max-width: 1200px) {
#settings-dashboard {
grid-template-columns: repeat(2, 1fr);
}
}
@media(max-width: 800px) {
#settings-dashboard {
grid-template-columns: repeat(1, 1fr);
}
}
`];
render() {
return html`
<uui-box>
<h1>Start here</h1>
<p>This section contains the building blocks for your Umbraco site. Follow the below links to find out more about working with the items in the Settings section.</p>
<h2>Find out more:</h2>
<ul>
<li>Read more about working with the items in Settings <a href="https://our.umbraco.com/documentation/Getting-Started/Backoffice/Sections/" target="_blank" rel="noopener">in the Documentation section</a> of Our Umbraco</li>
<li>Ask a question in the <a href="https://our.umbraco.com/forum" target="_blank" rel="noopener">Community Forum</a></li>
<li>Watch our free <a href="https://umbra.co/ulb" target="_blank" rel="noopener">tutorial videos on the Umbraco Learning Base</a></li>
<li>Find out about our <a href="https://umbraco.com/products/" target="_blank" rel="noopener">productivity boosting tools and commercial support</a></li>
<li>Find out about real-life <a href="https://umbraco.com/training/" target="_blank" rel="noopener">training and certification</a> opportunities</li>
</ul>
</uui-box>
<div id="settings-dashboard">
<uui-box>
<h1>Documentation</h1>
<p>Read more about working with the items in Settings in our Documentation.</p>
<uui-button look="primary" href="https://docs.umbraco.com/umbraco-cms/umbraco-cms" target="_blank" rel="noopener">Get the help you need</uui-button>
</uui-box>
<uui-box>
<h1>Community</h1>
<p>Ask a question in the community forum or our Discord community</p>
<uui-button look="primary" href="https://our.umbraco.com/forum" target="_blank" rel="noopener">Go to the forum</uui-button>
<uui-button look="primary" href="https://discord.umbraco.com" target="_blank" rel="noopener">Chat with the community</uui-button>
</uui-box>
<uui-box class="training">
<h1>Training</h1>
<p>Find out about real-life training and certification opportunities</p>
<uui-button look="primary" href="https://umbraco.com/training/" target="_blank" rel="noopener">Get Certified</uui-button>
</uui-box>
<uui-box>
<h1>Support</h1>
<p>Ask a question in the community forum or our Discord community.</p>
<uui-button look="primary" href="https://umbraco.com/support/" target="_blank" rel="noopener">Get the help you need</uui-button>
</uui-box>
<uui-box>
<h1>Videos</h1>
<p>Watch our free tutorial videos on the Umbraco Learning Base YouTube channel, to get upto speed quickly with Umbraco.</p>
<uui-button look="primary" href="https://www.youtube.com/c/UmbracoLearningBase" target="_blank" rel="noopener">Watch the videos</uui-button>
</uui-box>
</div>
`;
}
}