diff --git a/atst/ui_modules.py b/atst/ui_modules.py index 748ca980..96bdab07 100644 --- a/atst/ui_modules.py +++ b/atst/ui_modules.py @@ -46,3 +46,12 @@ class SidenavItem(UIModule): active=active, icon=icon, subnav=subnav) + +class EmptyState(UIModule): + def render(self, message, actionLabel, actionHref, icon=None): + return self.render_string( + "components/empty_state.html.to", + message=message, + actionLabel=actionLabel, + actionHref=actionHref, + icon=icon) diff --git a/scss/components/_empty_state.scss b/scss/components/_empty_state.scss index d11f5083..be8675ad 100644 --- a/scss/components/_empty_state.scss +++ b/scss/components/_empty_state.scss @@ -1,15 +1,27 @@ .empty-state { text-align: center; - padding-top: 10rem; - - p { - font-family: $font-sans; - font-weight: 300; - line-height: 10rem; - font-size: 44px; - line-height: 5rem; - margin: 0 auto; - padding-bottom: 2rem; - max-width: 40%; + padding: 6rem ($gap * 2) 0; + display: flex; + flex-direction: column; + align-items: center; + + @include media($medium-screen) { + padding: 8rem ($gap * 4) 0; } -} \ No newline at end of file + + .icon { + @include icon-size(50); + @include icon-color($color-gray-light); + } + + p { + @include h2; + line-height: 1.2; + max-width: 15em; + color: $color-gray; + + @include media($large-screen) { + @include h1; + } + } +} diff --git a/templates/components/empty_state.html.to b/templates/components/empty_state.html.to new file mode 100644 index 00000000..30246ddb --- /dev/null +++ b/templates/components/empty_state.html.to @@ -0,0 +1,9 @@ +
{{ message }}
+ + {% if icon %} + {% module Icon(icon) %} + {% end %} + + {{ actionLabel }} +Your next step is to create a Task Order (T.O.) associated with JEDI Cloud. Please consult a Contracting Officer (KO) or Contracting Officer Representative (COR) to help with this step.
" -) %} + {% module EmptyState( + 'There are currently no active requests for you to see.', + actionLabel='Create a new JEDI Cloud Request', + actionHref='/requests/new', + icon='document' + )%} -Order ID | -Request Date | -Requester | -Total Apps | -Status | -Actions | -||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
- {{ r['order_id'] }} - {% if r['is_new'] %}New - | + + +
Order ID | +Request Date | +Requester | +Total Apps | +Status | +Actions | +
---|---|---|---|---|---|
+ {{ r['order_id'] }} + {% if r['is_new'] %}New + | + {% end %} +{{ r['date'] }} | +{{ r['full_name'] }} | +{{ r['app_count'] }} | +{{ r['status'] }} | ++ Download + Approval + | +{{ r['date'] }} | -{{ r['full_name'] }} | -{{ r['app_count'] }} | -{{ r['status'] }} | -- Download - Approval - | - - {% end %} - -