Skip to content

Instantly share code, notes, and snippets.

@raytiley
Last active January 25, 2020 22:00
Show Gist options
  • Save raytiley/d1d221963996b0b0204a233feac5d2f4 to your computer and use it in GitHub Desktop.
Save raytiley/d1d221963996b0b0204a233feac5d2f4 to your computer and use it in GitHub Desktop.
Designer Homework
import Ember from 'ember';
export default Ember.Component.extend({
sslEnabled: false
});
import Ember from 'ember';
export default Ember.Controller.extend({
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.error {
background-color:red;
}
.pending {
background-color:yellow;
}
<!-- EXAMPLE OF HOW TO LOAD EXTERNAL CSS -->
<!-- Remove HTML comments -->
<!--
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
-->
<h1>Cablecast Graphic Designer Homework</h1>
<p>Hi! Below you will find the same UI component in several different states. The component is used to configure SSL (Secure Socket Layer) for our Cablecast product. The user can configure their system's domain name and optionally enable SSL. Given the configuration and sucess of background tasks the form below could be in one of several different states</p>
<p>
Your job is to evaluate the design for booth astetic pleasntness as well as fuctionality. The goal is to make it look nice as well as easy to use. At a minimum critque the design and provide actionable direction to improve it. Feel free to include any mockups, wireframes, sketches etc.
</p>
<p>
Addititonally, as time allows modify the app.css file in the left to implement your design.
</p>
<hr/>
<h2>Empty State</h2>
{{ssl-config}}
<hr/>
<h2>Pending State</h2>
{{ssl-config
domain="www.example.com"
sslEnabled=true
state='pending'
}}
<hr />
<h2>Error State</h2>
{{ssl-config
domain="www.example.com"
sslEnabled=true
state='error'
}}
{{#if (eq state 'pending')}}
<div class="pending">
Verifying domain name.
</div>
{{/if}}
{{#if (eq state 'error')}}
<div class="error">
Failed to verify domain name.
</div>
{{/if}}
<div class="ssl-config-form-group">
<label>Domain Name</label>
<input type=text value={{domain}}/>
</div>
<div class="ssl-config-form-group">
<label>Enable SSL</label>
<input type=checkbox checked={{sslEnabled}}/>
</div>
{{#if sslEnabled}}
<div class="ssl-config-form-group">
<label>Certificate Managment</label>
<select>
<option>Let's Encrypt</option>
<option>Manual</option>
</select>
</div>
{{/if}}
<div class="ssl-config-form-group">
<button>Cancel</button>
<button>Save</button>
</div>
{
"version": "0.15.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.4.3",
"ember-template-compiler": "3.4.3",
"ember-testing": "3.4.3"
},
"addons": {
"ember-data": "3.4.2",
"ember-truth-helpers": "2.0.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment