sidebar + topbar + overview block

This commit is contained in:
Hugo Soucy 2015-02-05 10:22:50 -05:00 committed by Frédéric Vachon
parent d78380a326
commit 8b8f4883e6
33 changed files with 1386 additions and 584 deletions

Binary file not shown.

View File

@ -0,0 +1,40 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Copyright (C) 2015 by original authors @ fontello.com</metadata>
<defs>
<font id="adagios-fontawesome" horiz-adv-x="1000" >
<font-face font-family="adagios-fontawesome" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
<missing-glyph horiz-adv-x="1000" />
<glyph glyph-name="profil" unicode="&#xe800;" d="m172 641c0-2 0-3 0-5 0 0 0 0 0 0 0-3 0-5 0-8 0-80 64-145 144-145 80 0 145 65 145 145 0 8-1 15-2 23 0 0 0 0 0 0-1 3-1 6-2 9-4 29 20 28 20 28h50c15-1 17-14 16-25-1-4-2-8-3-12 0 0 0 0 0 0l0 0c-1-8-2-15-2-23 0-80 65-145 145-145 80 0 144 65 144 145 0 3 0 5 0 8 0 0 0 0 0 0 0 2 0 3 0 5 0 23 31 17 31 17v50h-15v0h0c-30 0-66 30-66 30l0 0c-25 22-58 35-94 35-46 0-87-22-114-55l1 0c0 0-20 2-38 5-18 3-53 2-65 0-12-2-39-3-39-3h0c-26 32-67 53-112 53-64 0-69-13-94-35v0c0 0-36-30-66-30h-15v-50c0 0 31 6 31-17z m510 102c67 0 121-55 121-121s-54-121-121-121c-66 0-120 54-120 121 0 66 54 121 120 121z m-365 0c66 0 120-55 120-121s-54-121-120-121c-67 0-121 54-121 121 0 66 54 121 121 121z m569-345c2 44 15 91 5 144-11-34-23-71-34-102-2-6-3-11-5-16-3-5-9-9-13-13-1-2 0-4-1-6-7-9-15-17-21-26-4-5-6-12-12-15-11-1-21-2-31-4 1-16-2-29-2-44-9-5-19-8-28-13-9-22-14-49-24-70-2 0-4 1-6 1 0 25 5 47 3 69-2 14-8 31-12 40-3 7-8 18-11 23-1 1-3 4-4 5-2 2-3 3-4 5-9 10-23 24-33 31-1 0-6 5-9 7-21 13-41 17-67 22-12 2-26 5-37 4-15-3-25-13-39-19-6 4-13 7-19 10-7 3-14 9-21 10-9 2-17-1-26-2-27-3-48-16-66-26-3-2-18-2-19-3 0 0-6-6-7-7-12-8-22-17-31-27-7-9-9-15-14-24-2-5-5-8-6-12-5-11-8-22-9-30-3-27 0-52 1-76-4-2-8-3-12-5-6 25-15 48-22 73-11 4-22 6-29 14 1 16-3 27-2 43-11 0-21 2-31 3-10 9-16 20-24 31-8 11-19 21-25 33-1 4-3 10-5 14-12 34-21 68-34 99-1-25-3-46-2-68 1-21 6-41 7-60 0-11-1-21 0-32 1-18 2-34 7-44 5-12 14-25 17-35 2-6 2-13 3-19 4-15 9-36 13-48 3-14 5-14 12-23 2-3 5-8 7-10 1-3 4-6 5-7 2-3 4-5 5-7 1-2 2-2 3-4 2-2 2-6 4-8 2-4 4-3 5-7 2-5 1-11 2-16 2-14 6-30 7-45 13-19 33-34 45-53 6-11 11-23 17-35 6-12 11-23 15-36 6-1 9-6 13-9 2-2 4-1 6-3 3-2 4-6 6-7 1-2 4-2 7-4 6-5 11-10 19-14 12-5 33-6 51-10 19-4 37-10 52-10 18 0 34 7 50 8 8-3 15-7 21-12 10 4 19 8 28 12 14-1 30-7 45-7 7 1 17 4 26 6 21 4 45 10 64 14 5 1 10 0 14 1 1 1 2 4 5 5 5 5 8 6 12 9 11 9 22 18 31 24 5 13 10 24 15 37 7 13 15 32 23 41 10 12 19 23 28 33 4 5 8 9 10 14 3 9 4 19 5 29 1 5 1 10 2 16 1 4 0 11 2 15 1 5 7 9 10 14 7 10 17 23 23 31 2 4 5 8 6 12 4 10 5 21 7 33 2 5 4 11 6 16 3 12 4 23 8 33 2 4 5 8 7 13 2 5 3 11 5 16 3 6 6 9 7 14 3 15-1 31 0 46z m-216-146c-11-27-21-53-34-76-14 3-25 8-39 12-9-4-12-14-22-18-10 12-22 25-35 33-9 6-16 12-24 17-2 2-3 4-5 6-15 10-12 8-22 0-5-4-10-6-11-7-23-18-41-33-59-50-8 4-13 13-22 17-11-6-26-9-38-14-13 26-23 53-36 78-2-1-3-1-4-2 0 1 1 2 2 3 8 16 3 34 10 49 6 11 29 33 40 35 15 3 35 17 54 14 28-2 62-9 74 9 7-6 12-12 21-14 15-3 35 2 53 4 19 2 40 6 56 3 5-1 19-21 22-23 1 0 0-13 1-13 4-3 5-4 8-7 15-13 10-42 18-59-2 1-5 2-8 3z" horiz-adv-x="1000" />
<glyph glyph-name="cog" unicode="&#xe801;" d="m571 350q0 59-41 101t-101 42-101-42-42-101 42-101 101-42 101 42 41 101z m286 61v-124q0-7-4-13t-11-7l-104-16q-10-30-21-51 19-27 59-77 6-6 6-13t-5-13q-15-21-55-61t-53-39q-7 0-14 5l-77 60q-25-13-51-21-9-76-16-104-4-16-20-16h-124q-8 0-14 5t-6 12l-16 103q-27 9-50 21l-79-60q-6-5-14-5-8 0-14 6-70 64-92 94-4 5-4 13 0 6 5 12 8 12 28 37t30 40q-15 28-23 55l-102 15q-7 1-11 7t-5 13v124q0 7 5 13t10 7l104 16q8 25 22 51-23 32-60 77-6 7-6 14 0 5 5 12 15 20 55 60t53 40q7 0 15-5l77-60q24 13 50 21 9 76 17 104 3 15 20 15h124q7 0 13-4t7-12l15-103q28-9 50-21l80 60q5 5 13 5 7 0 14-5 72-67 92-95 4-5 4-13 0-6-4-12-9-12-29-38t-30-39q14-28 23-55l102-15q7-1 12-7t4-13z" horiz-adv-x="857.1" />
<glyph glyph-name="search" unicode="&#xe802;" d="m643 386q0 103-74 176t-176 74-177-74-73-176 73-177 177-73 176 73 74 177z m286-465q0-29-22-50t-50-21q-30 0-50 21l-191 191q-100-69-223-69-80 0-153 31t-125 84-84 125-31 153 31 152 84 126 125 84 153 31 152-31 126-84 84-126 31-152q0-123-69-223l191-191q21-21 21-51z" horiz-adv-x="928.6" />
<glyph glyph-name="clock" unicode="&#xe803;" d="m500 546v-250q0-7-5-12t-13-5h-178q-8 0-13 5t-5 12v36q0 8 5 13t13 5h125v196q0 8 5 13t12 5h36q8 0 13-5t5-13z m232-196q0 83-41 152t-110 111-152 41-153-41-110-111-41-152 41-152 110-111 153-41 152 41 110 111 41 152z m125 0q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
<glyph glyph-name="minus" unicode="&#xe804;" d="m786 439v-107q0-22-16-38t-38-15h-678q-23 0-38 15t-16 38v107q0 23 16 38t38 16h678q22 0 38-16t16-38z" horiz-adv-x="785.7" />
<glyph glyph-name="plus" unicode="&#xe805;" d="m786 439v-107q0-22-16-38t-38-15h-232v-233q0-22-16-37t-38-16h-107q-22 0-38 16t-15 37v233h-232q-23 0-38 15t-16 38v107q0 23 16 38t38 16h232v232q0 22 15 38t38 16h107q23 0 38-16t16-38v-232h232q22 0 38-16t16-38z" horiz-adv-x="785.7" />
<glyph glyph-name="up-dir" unicode="&#xe806;" d="m571 171q0-14-10-25t-25-10h-500q-15 0-25 10t-11 25 11 26l250 250q10 10 25 10t25-10l250-250q10-11 10-26z" horiz-adv-x="571.4" />
<glyph glyph-name="left-dir" unicode="&#xe807;" d="m357 600v-500q0-14-10-25t-26-11-25 11l-250 250q-10 11-10 25t10 25l250 250q11 11 25 11t26-11 10-25z" horiz-adv-x="357.1" />
<glyph glyph-name="right-dir" unicode="&#xe808;" d="m321 350q0-14-10-25l-250-250q-11-11-25-11t-25 11-11 25v500q0 15 11 25t25 11 25-11l250-250q10-10 10-25z" horiz-adv-x="357.1" />
<glyph glyph-name="down-dir" unicode="&#xe809;" d="m571 457q0-14-10-25l-250-250q-11-11-25-11t-25 11l-250 250q-11 11-11 25t11 25 25 11h500q14 0 25-11t10-25z" horiz-adv-x="571.4" />
<glyph glyph-name="bell-alt" unicode="&#xe80a;" d="m509-96q0 8-9 8-33 0-57 24t-23 57q0 9-9 9t-9-9q0-41 29-70t69-28q9 0 9 9z m455 160q0-29-21-50t-50-21h-250q0-59-42-101t-101-42-101 42-42 101h-250q-29 0-50 21t-21 50q28 24 51 49t47 67 42 89 27 114 11 146q0 84 66 157t171 89q-5 10-5 21 0 23 16 38t38 16 38-16 16-38q0-11-5-21 106-16 171-89t66-157q0-78 11-146t27-114 42-89 47-67 51-49z" horiz-adv-x="1000" />
<glyph glyph-name="arrows-cw" unicode="&#xe80b;" d="m843 261q0-3 0-4-36-150-150-243t-267-93q-81 0-157 31t-136 88l-72-72q-11-11-25-11t-25 11-11 25v250q0 14 11 25t25 11h250q14 0 25-11t10-25-10-25l-77-77q40-37 90-57t105-20q74 0 139 37t104 99q6 10 29 66 5 13 17 13h107q8 0 13-6t5-12z m14 446v-250q0-14-10-25t-26-11h-250q-14 0-25 11t-10 25 10 25l77 77q-82 77-194 77-75 0-140-37t-104-99q-6-10-29-66-5-13-17-13h-111q-7 0-13 6t-5 12v4q36 150 151 243t268 93q81 0 158-31t137-88l72 72q11 11 25 11t26-11 10-25z" horiz-adv-x="857.1" />
<glyph glyph-name="thumbs-up" unicode="&#xe80c;" d="m143 100q0 15-11 25t-25 11-25-11-11-25 11-25 25-11 25 11 11 25z m643 321q0 29-22 50t-50 22h-196q0 32 27 89t26 89q0 55-17 81t-72 27q-14-15-21-48t-17-70-33-61q-13-13-43-51-2-3-13-17t-18-22-19-24-22-25-22-19-22-16-20-5h-18v-357h18q7 0 18-1t18-4 21-6 20-7 20-7 16-5q118-41 191-41h67q107 0 107 93 0 15-2 31 16 9 26 30t10 41-10 38q29 28 29 67 0 13-5 31t-14 26q18 1 30 26t12 45z m71 1q0-50-27-91 5-18 5-38 0-43-21-81 1-12 1-24 0-56-33-99 0-78-48-123t-126-45h-72q-54 0-106 13t-121 36q-65 23-77 23h-161q-29 0-50 21t-21 50v357q0 30 21 51t50 21h153q20 13 77 86 32 42 60 72 13 14 19 47t17 71 35 60q22 21 50 21 47 0 84-18t57-57 20-104q0-51-27-107h98q58 0 101-42t42-100z" horiz-adv-x="857.1" />
<glyph glyph-name="attention" unicode="&#xe80d;" d="m571 83v106q0 8-5 13t-12 5h-108q-7 0-12-5t-5-13v-106q0-8 5-13t12-6h108q7 0 12 6t5 13z m-1 208l10 257q0 6-5 10-7 6-14 6h-122q-7 0-14-6-5-4-5-12l9-255q0-5 6-9t13-3h103q8 0 13 3t6 9z m-7 522l428-786q20-35-1-70-10-17-26-26t-35-10h-858q-18 0-35 10t-26 26q-21 35-1 70l429 786q9 17 26 27t36 10 36-10 27-27z" horiz-adv-x="1000" />
<glyph glyph-name="menu" unicode="&#xe80e;" d="m857 100v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 25t25 11h785q15 0 26-11t10-25z m0 286v-72q0-14-10-25t-26-10h-785q-15 0-25 10t-11 25v72q0 14 11 25t25 10h785q15 0 26-10t10-25z m0 285v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 26t25 10h785q15 0 26-10t10-26z" horiz-adv-x="857.1" />
<glyph glyph-name="sliders" unicode="&#xe80f;" d="m196 64v-71h-196v71h196z m197 72q14 0 25-11t11-25v-143q0-14-11-25t-25-11h-143q-14 0-25 11t-11 25v143q0 15 11 25t25 11h143z m89 214v-71h-482v71h482z m-357 286v-72h-125v72h125z m732-572v-71h-411v71h411z m-536 643q15 0 26-10t10-26v-142q0-15-10-26t-26-10h-142q-15 0-26 10t-10 26v142q0 15 10 26t26 10h142z m358-286q14 0 25-10t10-25v-143q0-15-10-25t-25-11h-143q-15 0-25 11t-11 25v143q0 14 11 25t25 10h143z m178-71v-71h-125v71h125z m0 286v-72h-482v72h482z" horiz-adv-x="857.1" />
<glyph glyph-name="down-open" unicode="&#xe810;" d="m939 399l-414-413q-10-11-25-11t-25 11l-414 413q-11 11-11 26t11 25l92 92q11 11 26 11t25-11l296-296 296 296q11 11 25 11t26-11l92-92q11-11 11-25t-11-26z" horiz-adv-x="1000" />
<glyph glyph-name="left-open" unicode="&#xe811;" d="m653 682l-296-296 296-297q11-10 11-25t-11-25l-92-93q-11-10-25-10t-25 10l-414 415q-11 10-11 25t11 25l414 414q10 10 25 10t25-10l92-93q11-10 11-25t-11-25z" horiz-adv-x="714.3" />
<glyph glyph-name="right-open" unicode="&#xe812;" d="m618 361l-414-415q-11-10-25-10t-26 10l-92 93q-11 11-11 25t11 25l296 297-296 296q-11 11-11 25t11 25l92 93q11 10 26 10t25-10l414-414q10-11 10-25t-10-25z" horiz-adv-x="714.3" />
<glyph glyph-name="up-open" unicode="&#xe813;" d="m939 107l-92-92q-11-10-26-10t-25 10l-296 297-296-297q-11-10-25-10t-26 10l-92 92q-11 11-11 26t11 25l414 414q11 10 25 10t25-10l414-414q11-11 11-25t-11-26z" horiz-adv-x="1000" />
<glyph glyph-name="angle-left" unicode="&#xe814;" d="m350 546q0-7-6-12l-219-220 219-219q6-6 6-13t-6-13l-28-28q-5-5-12-5t-13 5l-260 260q-6 6-6 13t6 13l260 260q5 6 13 6t12-6l28-28q6-5 6-13z" horiz-adv-x="357.1" />
<glyph glyph-name="angle-right" unicode="&#xe815;" d="m332 314q0-7-6-13l-260-260q-5-5-12-5t-13 5l-28 28q-6 6-6 13t6 13l219 219-219 220q-6 5-6 12t6 13l28 28q5 6 13 6t12-6l260-260q6-5 6-13z" horiz-adv-x="357.1" />
<glyph glyph-name="angle-up" unicode="&#xe816;" d="m600 189q0-7-6-13l-28-27q-5-6-12-6t-13 6l-220 219-219-219q-5-6-13-6t-13 6l-27 27q-6 6-6 13t6 13l260 260q5 6 12 6t13-6l260-260q6-5 6-13z" horiz-adv-x="642.9" />
<glyph glyph-name="angle-down" unicode="&#xe817;" d="m600 439q0-7-6-13l-260-260q-5-5-13-5t-12 5l-260 260q-6 6-6 13t6 13l27 28q6 6 13 6t13-6l219-219 220 219q5 6 13 6t12-6l28-28q6-5 6-13z" horiz-adv-x="642.9" />
<glyph glyph-name="cancel" unicode="&#xe818;" d="m724 112q0-22-15-38l-76-76q-16-15-38-15t-38 15l-164 165-164-165q-16-15-38-15t-38 15l-76 76q-16 16-16 38t16 38l164 164-164 164q-16 16-16 38t16 38l76 76q16 16 38 16t38-16l164-164 164 164q16 16 38 16t38-16l76-76q15-15 15-38t-15-38l-164-164 164-164q15-15 15-38z" horiz-adv-x="785.7" />
<glyph glyph-name="barre-notif" unicode="&#xe81a;" d="m54 810c0 0 0-907 0-910 0-17-1-34 11-46 10-10 29-16 59-16h406v-14h-406c-33 0-56 7-69 20-16 16-15 37-15 56 3 146 0 108 0 910h14z" horiz-adv-x="507" />
<glyph glyph-name="ok" unicode="&#xe81b;" d="m528 477v119l-264 152-264-152v-119l264 153 264-153z m54-143l102 59v305l-264 152-102-59 264-152v-305l0 0z m-318 251l-264-152v-305l102-59v304l264 153-102 59z m474 68v-305l-264-152 102-60 264 153v305l-102 59z m-439-422v-118l264-153 277 161v118l-277-161-264 153z m-40 171l-102-59 0-305 264-153 102 59-264 153v305z" horiz-adv-x="881" />
<glyph glyph-name="error" unicode="&#xe81c;" d="m688 164l-59-102 483 0-464 788-58-102 344-583-246-1z m466-212h-719l128 209-59 102-247-413h956l-59 102z m-510 308l65 92-198 324-511-826h119l392 623 133-213z" horiz-adv-x="1213" />
<glyph glyph-name="warning" unicode="&#xe81d;" d="m640 661l0 0h-640v-811h124v687h516v124z m47-451h125v640h-812v-124h687v-516z m190 640v-705h-516v-106h640v811h-124z m-581-360h-107v-640h812v124h-705v516z" horiz-adv-x="1001" />
</font>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Binary file not shown.

View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="75.667px" height="149.167px" viewBox="5.167 4.834 75.667 149.167" enable-background="new 5.167 4.834 75.667 149.167"
xml:space="preserve">
<path fill="#49515C" d="M8,6c0,0-0.014,135.313-0.014,135.729c0,2.504-0.035,5.052,1.655,6.771c1.565,1.593,4.427,2.5,8.859,2.5H79
v2H18.5c-4.997,0-8.378-0.97-10.339-2.965c-2.277-2.315-2.223-5.517-2.174-8.341C6.355,119.985,5.993,125.573,6,6H8z"/>
</svg>

After

Width:  |  Height:  |  Size: 675 B

View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="15px" height="15px" viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve">
<g>
<g>
<polygon points="14.979,0.695 14.307,0.021 7.5,6.827 0.695,0.021 0.021,0.695 6.827,7.5 0.021,14.307 0.695,14.979 7.5,8.173
14.307,14.979 14.979,14.307 8.173,7.5 "/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 581 B

12
app/assets/images/error.svg Executable file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="57.582px" height="47.475px" viewBox="0 0 57.582 47.475" enable-background="new 0 0 57.582 47.475" xml:space="preserve">
<g>
<g>
<path fill="#E84C3D" d="M32.654,32.548l-2.793,4.862l22.939-0.008L30.779,0l-2.793,4.858l16.377,27.685L32.654,32.548z
M54.771,42.611H20.668l6.054-9.89l-2.807-4.855L12.191,47.474h45.391L54.771,42.611z M30.559,28.007l3.08-4.352L24.255,8.279
L0,47.474h5.641l18.609-29.59L30.559,28.007z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 726 B

11
app/assets/images/ok.svg Executable file
View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="58.25px" height="66.125px" viewBox="-1.356 -1.108 58.25 66.125" enable-background="new -1.356 -1.108 58.25 66.125"
xml:space="preserve">
<path fill="#87B153" d="M34.906,24.641v-7.815L17.454,6.749L0,16.825v7.815l17.453-10.076L34.906,24.641z M38.464,34.137l6.77-3.906
V10.076L27.781,0l-6.768,3.908l17.451,10.076V34.137L38.464,34.137z M17.454,17.534L0,27.61v20.153l6.769,3.908V31.518
l17.453-10.076L17.454,17.534z M48.771,13.049v20.152L31.318,43.278l6.768,3.907L55.539,37.11V16.956L48.771,13.049z M19.763,40.951
v7.814l17.452,10.076l18.323-10.644v-7.813L37.215,51.025L19.763,40.951z M17.133,29.645l-6.768,3.908l-0.001,20.151l17.453,10.078
l6.769-3.909L17.133,49.799V29.645z"/>
</svg>

After

Width:  |  Height:  |  Size: 972 B

View File

@ -0,0 +1,59 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path d="M17.236,20.907c-0.013,0.162-0.027,0.325-0.035,0.489c0,0.006,0,0.012-0.002,0.019c-0.015,0.261-0.022,0.524-0.022,0.788
c0,8.001,6.466,14.485,14.442,14.485c7.978,0,14.444-6.484,14.444-14.485c0-0.771-0.06-1.527-0.178-2.265
c0-0.007,0-0.013-0.005-0.019c-0.045-0.297-0.105-0.592-0.168-0.882c-0.37-2.955,1.955-2.79,1.955-2.79h5.058
c1.506,0.01,1.643,1.406,1.523,2.479c-0.098,0.396-0.178,0.798-0.242,1.205c0,0.003-0.003,0.009-0.003,0.009l0.003-0.005
c-0.117,0.74-0.178,1.497-0.178,2.27c0,8,6.466,14.485,14.439,14.485c7.978,0,14.443-6.484,14.443-14.485
c0-0.266-0.011-0.527-0.021-0.789c0-0.007,0-0.012,0-0.018c-0.012-0.165-0.025-0.329-0.041-0.49c0.035-2.253,3.15-1.748,3.15-1.748
v-4.959h-1.477v-0.002H84.32c-3,0-6.615-2.958-6.615-2.958l0.002,0.005c-2.532-2.195-5.828-3.526-9.439-3.526
c-4.595,0-8.688,2.156-11.328,5.511l0.006-0.015c0,0-2-0.183-3.764-0.477c-1.761-0.293-5.25-0.196-6.493,0
c-1.239,0.196-3.879,0.31-3.879,0.31h-0.002c-2.645-3.251-6.677-5.33-11.186-5.33c-6.439,0-6.909,1.333-9.439,3.526V11.24
c0,0-3.613,2.958-6.614,2.958h-1.481v4.962C14.088,19.16,17.206,18.654,17.236,20.907z M68.221,10.75
c6.67,0,12.071,5.405,12.071,12.071s-5.401,12.071-12.071,12.071c-6.664,0-12.07-5.403-12.07-12.071
C56.15,16.155,61.557,10.75,68.221,10.75z M31.664,10.75c6.667,0,12.072,5.405,12.072,12.071s-5.405,12.071-12.072,12.071
c-6.664,0-12.069-5.403-12.069-12.071C19.595,16.155,25,10.75,31.664,10.75z M88.613,45.158c0.193-4.322,1.437-9.015,0.516-14.347
c-1.132,3.375-2.33,7.115-3.458,10.197c-0.206,0.565-0.293,1.12-0.519,1.555c-0.266,0.512-0.848,0.896-1.209,1.383
c-0.114,0.15-0.069,0.384-0.172,0.519c-0.703,0.918-1.446,1.741-2.074,2.592c-0.396,0.533-0.61,1.211-1.211,1.556
c-1.098,0.053-2.11,0.196-3.111,0.345c0.118,1.673-0.167,2.944-0.173,4.494c-0.894,0.437-1.874,0.776-2.765,1.212
c-0.908,2.26-1.43,4.909-2.42,7.085c-0.201-0.051-0.382-0.123-0.574-0.184c-0.078-2.45,0.473-4.686,0.227-6.89
c-0.152-1.361-0.814-3.066-1.211-3.976c-0.307-0.7-0.738-1.778-1.036-2.248c-0.09-0.14-0.345-0.424-0.452-0.561
c-0.168-0.209-0.264-0.294-0.41-0.476c-0.855-1.052-2.277-2.407-3.287-3.111c-0.051-0.036-0.627-0.542-0.864-0.691
c-2.085-1.314-4.101-1.71-6.742-2.212c-1.163-0.223-2.524-0.498-3.631-0.346c-1.544,0.213-2.521,1.276-3.974,1.901
c-0.57-0.469-1.273-0.713-1.903-1.035c-0.663-0.344-1.406-0.924-2.072-1.037c-0.861-0.145-1.732,0.074-2.593,0.173
c-2.728,0.311-4.835,1.626-6.569,2.611c-0.353,0.199-1.814,0.269-1.902,0.309c-0.055,0.024-0.63,0.649-0.69,0.691
c-1.231,0.851-2.27,1.716-3.113,2.748c-0.69,0.85-0.918,1.446-1.381,2.42c-0.232,0.484-0.513,0.766-0.69,1.209
c-0.421,1.043-0.773,2.176-0.866,2.939c-0.329,2.678,0.04,5.202,0.146,7.659c-0.399,0.148-0.798,0.297-1.191,0.451
c-0.634-2.532-1.589-4.743-2.245-7.26c-1.058-0.381-2.222-0.655-2.94-1.381c0.133-1.632-0.22-2.772-0.173-4.322
c-1.095-0.053-2.107-0.197-3.11-0.346c-0.943-0.869-1.601-2.026-2.417-3.11c-0.788-1.04-1.839-2.044-2.42-3.284
c-0.183-0.383-0.371-0.952-0.521-1.382c-1.188-3.423-2.117-6.773-3.458-9.854c-0.04,2.416-0.305,4.557-0.172,6.742
c0.132,2.093,0.586,4.09,0.693,6.05c0.055,1.02-0.05,2.058,0,3.112c0.082,1.847,0.172,3.409,0.688,4.495
c0.555,1.153,1.383,2.413,1.731,3.457c0.195,0.588,0.198,1.276,0.345,1.901c0.368,1.543,0.891,3.563,1.211,4.84
c0.34,1.366,0.58,1.397,1.208,2.247c0.25,0.341,0.56,0.845,0.693,1.039c0.187,0.286,0.408,0.527,0.518,0.689
c0.19,0.289,0.411,0.529,0.516,0.692c0.108,0.16,0.253,0.214,0.348,0.347c0.173,0.24,0.176,0.618,0.343,0.863
c0.266,0.379,0.396,0.316,0.521,0.691c0.148,0.441,0.098,1.06,0.173,1.556c0.215,1.401,0.625,3.052,0.69,4.497
c1.376,1.934,3.289,3.45,4.497,5.357c0.661,1.047,1.184,2.297,1.727,3.455c0.561,1.193,1.104,2.358,1.557,3.631
c0.505,0.076,0.818,0.557,1.209,0.865c0.213,0.166,0.463,0.164,0.693,0.346c0.203,0.16,0.318,0.533,0.518,0.691
c0.175,0.135,0.458,0.172,0.691,0.346c0.678,0.496,1.161,1.07,1.902,1.383c1.266,0.529,3.306,0.646,5.185,1.037
c1.837,0.381,3.657,1.035,5.188,1.035c1.787,0,3.399-0.732,5.013-0.862c0.72,0.373,1.433,0.753,2.074,1.21
c0.974-0.352,1.865-0.787,2.769-1.21c1.402,0.137,2.963,0.723,4.494,0.69c0.742-0.016,1.709-0.332,2.59-0.519
c2.16-0.461,4.562-1.011,6.398-1.383c0.487-0.099,1.076-0.046,1.381-0.175c0.168-0.068,0.274-0.325,0.52-0.517
c0.537-0.422,0.828-0.547,1.211-0.864c1.078-0.904,2.172-1.766,3.109-2.422c0.484-1.252,0.984-2.406,1.555-3.631
c0.615-1.316,1.453-3.197,2.25-4.146c0.955-1.146,1.912-2.248,2.766-3.283c0.445-0.544,0.844-0.874,1.036-1.385
c0.343-0.889,0.368-1.963,0.521-2.938c0.068-0.45,0.088-0.965,0.174-1.558c0.064-0.436,0.033-1.148,0.172-1.555
c0.168-0.488,0.697-0.906,1.035-1.383c0.701-0.986,1.688-2.267,2.25-3.111c0.277-0.42,0.508-0.763,0.688-1.211
c0.37-0.912,0.423-2.092,0.692-3.283c0.121-0.518,0.398-1.043,0.521-1.555c0.301-1.271,0.469-2.33,0.863-3.285
c0.197-0.47,0.46-0.883,0.691-1.383c0.207-0.443,0.302-1.078,0.52-1.555c0.255-0.562,0.602-0.889,0.693-1.383
C88.881,48.327,88.54,46.685,88.613,45.158z M67.002,59.85c-1.061,2.625-2.143,5.231-3.456,7.604
c-1.325-0.351-2.485-0.86-3.804-1.209c-0.946,0.381-1.27,1.382-2.25,1.728c-1.012-1.138-2.202-2.445-3.456-3.283
c-0.894-0.599-1.611-1.188-2.42-1.729c-0.179-0.12-0.308-0.374-0.519-0.52c-1.512-1.055-1.157-0.847-2.248,0
c-0.434,0.334-0.909,0.594-1.039,0.692c-2.309,1.731-4.128,3.279-5.875,5.013c-0.854-0.474-1.345-1.308-2.248-1.729
c-1.131,0.6-2.605,0.854-3.804,1.382c-1.241-2.562-2.332-5.274-3.631-7.776c-0.123,0.066-0.256,0.123-0.382,0.187
c0.07-0.099,0.139-0.205,0.216-0.349c0.821-1.547,0.295-3.334,1.036-4.84c0.576-1.164,2.861-3.291,3.977-3.494
c1.539-0.277,3.448-1.674,5.358-1.47c2.807,0.295,6.248,0.974,7.432-0.865c0.7,0.573,1.161,1.192,2.074,1.384
c1.534,0.322,3.539-0.162,5.36-0.346c1.875-0.188,3.992-0.65,5.529-0.345c0.502,0.1,1.91,2.158,2.264,2.318
c0.057,0.025,0.008,1.295,0.074,1.338c0.377,0.246,0.513,0.387,0.773,0.617c1.509,1.327,1.013,4.28,1.856,5.983
C67.552,60.041,67.287,59.935,67.002,59.85z"/>
</svg>

After

Width:  |  Height:  |  Size: 6.1 KiB

12
app/assets/images/warning.svg Executable file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="55.557px" height="55.508px" viewBox="0 0 55.557 55.508" enable-background="new 0 0 55.557 55.508" xml:space="preserve">
<g>
<g>
<path fill="#F9A13B" d="M35.529,10.467L35.529,10.467H0.001v45.041h6.894V17.361h28.635V10.467z M38.147,35.503h6.895V0H0.001
v6.869h38.146V35.503z M48.663,0v39.146H20.026v5.895h35.529V0H48.663z M16.408,20.003h-5.896v35.505h45.043v-6.871H16.408V20.003
z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 695 B

View File

@ -3,13 +3,13 @@ var SFLfront = (function() {
// States for UI modifications
var state = {
visible: 'js-is--visible',
hidden: 'js-is--hidden',
current: 'js-is--current',
open: 'js-is--open',
fadeIn: 'js-is--fadein',
fadeOut: 'js-is--fadeout',
hasChild: 'js-is--haschild'
visible: 'state--visible',
hidden: 'state--hidden',
current: 'state--current',
open: 'state--open',
fadeIn: 'state--fadein',
fadeOut: 'state--fadeout',
hasChild: 'state--haschild'
};
// Breakpoints for the responsive web design

View File

@ -1,15 +1,3 @@
//----------------------------------*\
// FONTAWESOME
//----------------------------------*/
// Rewrite Some Fontawesome Variables
//----------------------------------*/
$fa-font-path: '../../bower_components/fontawesome/fonts' !default;
// Then Import Fontawesome
//----------------------------------*/
@import '../../bower_components/fontawesome/scss/font-awesome.scss';
//----------------------------------*\
// BOOTSTRAP MODULES
//----------------------------------*/
@ -39,9 +27,11 @@ $fa-font-path: '../../bower_components/fontawesome/fonts' !default;
// GLOBAL MODULES
//----------------------------------*/
@import 'global/default';
@import 'global/color-schemes';
@import 'global/typography';
@import 'global/iconography';
@import 'global/helpers';
@import 'global/layout';
@import 'global/color-schemes';
@import 'global/print';
//----------------------------------*\
@ -53,45 +43,13 @@ $fa-font-path: '../../bower_components/fontawesome/fonts' !default;
// OBJECT MODULES
//----------------------------------*/
@import 'modules-objects/togglable-tabs';
@import 'modules-objects/problems';
@import 'modules-objects/panes';
//----------------------------------*\
// INTERFACE MODULES
//----------------------------------*/
@import '../../components/topbar/topbar';
@import '../../components/sidebar/sidebar';
@import '../../components/tactical/tactical';
/* body:before { */
/* display:none; */
/* content: ''; */
/* } */
/* .menu { */
/* list-style: none; */
/* border-bottom: 0.1em solid black; */
/* margin-bottom: 2em; */
/* padding: 0 0 0.5em; */
/* } */
/* .menu:before { */
/* content: "["; */
/* } */
/* .menu:after { */
/* content: "]"; */
/* } */
/* .menu > li { */
/* display: inline; */
/* } */
/* .menu > li:before { */
/* content: "|"; */
/* padding-right: 0.3em; */
/* } */
/* .menu > li:nth-child(1):before { */
/* content: ""; */
/* padding: 0; */
/* } */
@import 'modules-interface/main';
@import '../../topbar/topbar';
@import '../../sidebar/sidebar';
@import '../../tactical/tactical';

View File

@ -5,29 +5,46 @@
// Light Scheme
//----------------------------------*/
.color-scheme--light {
%colorLink {
color:$_color_light_epsilon;
&:hover {color:orange;}
}
%colorBorderThin {border-color:$_color_light_gamma;}
%colorBkgTopbarPanel {background:$_color_light_gamma;}
// Light scheme is not ready for now.
}
// Dark Scheme
//----------------------------------*/
.color-scheme--dark {
%colorLink {
color:$_color_dark_epsilon;
&:hover {color:white;}
.color-scheme--dark {
%colorTxtCurrent {
color:$_color_dark_delta;
}
%colorBorderThin {border-color:$_color_dark_gamma;}
%colorHightContrast {
color:$_color_omega;
}
%colorBkgTopbarPanel {background:$_color_dark_gamma;}
// For panel and the sidebar
%colorBkgPanel {
background:$_color_dark_alpha;
}
%colorLink {
color:$_color_dark_delta;
&:hover {
color:white;
}
}
%colorBorderThin {
border-color:$_color_dark_alpha;
}
%colorBkgTopbar {
background:$_color_dark_beta;
}
%colorBkgTopbarPanel {
background:$_color_dark_alpha;
}
%colorBkgTopbarButton {
background:$_color_dark_beta;
}
}

View File

@ -20,22 +20,13 @@
text-shadow:none;
}
html,
button,
input,
select,
textarea {/* color:$_color_text; */}
html,
body {
&.color-scheme--dark {background:$_color_dark_alpha;}
height:100%;
min-height:100%;
}
html {
//@include line-height($_base_font_size, $_base_line_height);
font-size:em($_base_font_size);
font-family:$_font_family_alpha;
-ms-text-size-adjust:100%;
@ -43,6 +34,16 @@ html {
}
body {
&.color-scheme--dark {
background:$_color_dark_gamma;
color:$_color_dark_delta;
}
&.color-scheme--light {
background:$_color_light_gamma;
color:$_color_light_delta;
}
font-size:inherit;
line-height:inherit;
margin:0;
@ -74,22 +75,20 @@ audio:not([controls]) {
[hidden],
template {display:none;}
a {background:transparent;}
a {
@extend %colorLink;
background:transparent;
}
a:focus {outline:thin dotted;}
a:active,
a:hover {outline:0;}
h1 {
font-size:2em;
margin:0.67em 0;
}
abbr[title] {border-bottom:1px dotted;}
b,
strong {font-weight:bold;}
strong {font-weight:700;}
dfn {font-style:italic;}
@ -116,7 +115,7 @@ pre {white-space:pre-wrap;}
q {quotes:"\201C" "\201D" "\2018" "\2019";}
small {font-size:80%;}
small {font-size:em(10, $_base_font_size);}
sub,
sup {
@ -151,6 +150,7 @@ button,
input,
select,
textarea {
@extend %colorTxtCurrent;
font-family:inherit;
font-size:100%;
margin:0;
@ -205,10 +205,22 @@ table {
border-spacing:0;
}
td,
th {text-align:left;}
thead {
th {padding:0 0 $_space_narrow;}
}
tbody {
td,
th {padding:$_space_narrow 0;}
}
menu,
nav {
a {text-decoration:none;}
ol,
ul {
list-style-type:none;

View File

@ -110,11 +110,14 @@ body:after {
}
//----------------------------------*\
// JAVASCRIPT CLASSES
// STATES CLASSES
//----------------------------------*/
.js-is--hidden {display:none;}
.js-is--visible {display:block;}
//.js-is--current {}
//.js-is--open {}
//.js-is--close {}
.state--hidden {display:none;}
.state--visible {display:block;}
/* .state--current {} */
/* .state--open {} */
/* .state--close {} */
/* .state--error {} */
/* .state--warning {} */
/* .state--ok {} */
/* etc. */

File diff suppressed because one or more lines are too long

View File

@ -5,80 +5,46 @@
display:table;
min-height:100%;
width:100%;
.flexbox & {
display:flex;
min-height:100vh;
flex-direction:column;
}
}
.layout__container {
//background:yellow;
display:table-row;
min-height:100%;
.flexbox & {
display:block; /* IE fix */
display:flex;
flex:1;
flex-direction:row;
}
}
.layout__main {
display:table-cell;
//min-width:320px;
vertical-align:top;
width:100%;
.flexbox & {
display:block; /* IE fix */
flex:1;
}
}
.layout__aside {
//background:red;
display:table-cell;
min-height:100%;
min-width:320px;
vertical-align:top;
width:320px;
.flexbox & {
display:block;
}
@include large-xlarge-screen {
min-width:250px;
width:250px;
}
/* */
&.collapse {
display:none;
visibility:hidden;
&.in {
display:block;
display:table-cell;
visibility:visible;
}
}
}
.layout__row {
/* background:black; */
margin-bottom:1em;
}
.layout__full {width:100%;}
.layout__flexrow {
/* background:yellow; */
.layout__half {width:50%;}
/* > :nth-child(even) {background-color:aquamarine;} */
/* > :nth-child(odd) {background-color:pink;} */
.layout__third {width:33.333333333%;}
.flexbox & {
display:flex;
flex-direction:row;
}
}
.layout__quarter {width:25%;}

View File

@ -0,0 +1,48 @@
//----------------------------------*\
// TYPOGRAPHY
//----------------------------------*/
%typo-logo-title {
font:400 em(26, $_base_font_size)(/ 1) $_font_family_alpha;
text-transform:uppercase;
// Tracking 300 PSD = Combien en letterspacing CSS ?
}
%typo-title {font:400 em(24, $_base_font_size)(/ 1) $_font_family_alpha;}
%typo-subtitle {font:700 em(14, $_base_font_size)(/ 1) $_font_family_alpha;}
%typo-header-table {
font:400 em(14, $_base_font_size)(/ 1) $_font_family_alpha;
text-transform:uppercase;
}
%typo-current-text {font:400 em(14, $_base_font_size)(/ 1) $_font_family_alpha;}
%typo-more-info {font:italic 400 em(14, $_base_font_size)(/ 1) $_font_family_alpha;}
%typo-more-info--little {font:400 em(12, $_base_font_size)(/ 1) $_font_family_alpha;}
%typo-menu {font:400 em(14, $_base_font_size)(/ 1) $_font_family_alpha;}
/* h1, h2, h3, h4, h5, h6 {margin:0;} */
h1,
.like-h1 {@extend %typo-logo-title;}
h2,
.like-h2 {
@extend %typo-title;
margin:0;
}
/* h3, */
/* .like-h3 {} */
/* h4, */
/* .like-h4 {} */
/* h5, */
/* .like-h5 {} */
/* h6, */
/* .like-h6 {} */

View File

@ -0,0 +1,98 @@
//----------------------------------*\
// MAIN BLOCK INTERFACE
//----------------------------------*/
.main[role="main"] {}
.main__overview {
padding:$_space $_space_narrow $_space_narrow;
position:relative;
@include large-xlarge-screen {
padding:$_space;
}
.color-scheme--dark & {
background:$_color_dark_beta;
}
.color-scheme--light & {
background:$_color_light_beta;
}
table {width:100%;}
td,
th {
text-align:right;
.color-scheme--dark & {
color:$_color_omega;
}
.color-scheme--light & {
color:$_color_alpha;
}
&:first-child {text-align:left;}
&.state--error {color:$_color_error;}
&.state--warning {color:$_color_warning;}
&.state--ok {color:$_color_ok;}
}
thead th {
@extend %typo-subtitle;
&:first-child {
.color-scheme--dark & {
color:$_color_dark_alpha;
}
.color-scheme--light & {
color:$_color_light_alpha;
}
}
}
tbody {
td,
th {
border-top-style:solid;
border-top-width:1px;
.color-scheme--dark & {
border-top-color:$_color_dark_beta;
}
.color-scheme--light & {
border-top-color:$_color_light_beta;
}
}
tr:first-child {
td,
th {border-top:0;}
}
th {@extend %typo-header-table;}
}
}
.main__overview__title {
margin-bottom:$_space_narrow;
@include large-xlarge-screen {
margin-bottom:$_space;
}
.color-scheme--dark & {
color:$_color_omega;
}
.color-scheme--light & {
color:$_color_alpha;
}
}
.main__content {}

View File

@ -0,0 +1,39 @@
.panes {
background:aquamarine;
display:table;
width:100%;
.color-scheme--dark & {
background:$_color_dark_gamma;
}
.color-scheme--light & {
background:$_color_light_gamma;
}
}
.panes__pane {
//background:blue;
border-style:solid;
border-width:0 0 0 1px;
display:table-cell;
padding:$_space_narrow;
&:first-child {border-left:0;}
@include large-xlarge-screen {
padding:$_space;
}
.color-scheme--dark & {
border-color:$_color_dark_beta;
}
.color-scheme--light & {
border-color:$_color_light_beta;
}
.panes--2 & {width:50%;}
.panes--3 & {width:33.333333333%;}
}

View File

@ -0,0 +1,179 @@
//----------------------------------*\
// PROBLEMS LIST AND TABLE
//----------------------------------*/
.problems__list {
margin-bottom:$_space;
.state--error,
.state--warning,
.state--ok {
position:relative;
&:before {
top:0;
font-family:"adagios-fontawesome";
left:0;
position:absolute;
z-index:988888;
}
}
.state--error {
@extend .ico-error;
&:before {
color:$_color_error;
font-size:em(13, $_base_font_size);
}
}
.state--warning {
@extend .ico-warning;
&:before {
color:$_color_warning;
font-size:em(16, $_base_font_size);
}
}
.state--ok {
@extend .ico-ok;
&:before {
color:$_color_ok;
font-size:em(20, $_base_font_size);
}
}
}
.problems__item {
border-top:1px solid;
padding-top:$_space_narrow;
.color-scheme--dark & {
border-color:$_color_dark_gamma;
}
.color-scheme--light & {
border-color:$_color_light_gamma;
}
&:first-child {
border-top:0;
padding-top:0;
}
}
.problems__host,
.problems__name,
.problems__description {padding-left:25px;}
.problems__host,
.problems__name {
font-weight:normal;
.color-scheme--dark & {
color:$_color_omega;
}
.color-scheme--light & {
color:$_color_alpha;
}
}
.problems__name,
.problems__description {margin-left:25px;}
.problems__host,
.problems__description {margin-bottom:$_space_narrow;}
.problems__host {display:block;}
.problems__desclist {
position:relative;
&:before {
background:$_color_dark_gamma;
content:"";
display:block;
height:calc(100% - 2.143em);
left:8px;
position:absolute;
top:0;
width:1px;
}
}
.problems__name {
&:after {
background:transparent;
border:1px solid;
border-radius:0 0 0 5px;
content:"";
display:block;
height:24px;
left:-17px;
position:absolute;
top:-18px;
width:20px;
.color-scheme--dark & {
border-color:transparent transparent $_color_dark_gamma $_color_dark_gamma;
}
.color-scheme--light & {
border-color:transparent transparent $_color_light_gamma $_color_light_gamma;
}
}
span {
display:inline-block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.problems__duration {
display:none;
float:right;
@include medium-and-up-screen {
display:inline-block;
}
.color-scheme--dark & {
color:$_color_dark_delta;
}
.color-scheme--light & {
color:$_color_light_delta;
}
}
}
.problems__description {
@extend %typo-more-info--little;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.problems__viewall {
@extend %button-reset;
@extend %typo-more-info;
display:block;
padding:$_space_narrow;
text-align:center;
width:100%;
.color-scheme--dark & {
background:$_color_dark_gamma;
color:$_color_omega;
}
.color-scheme--light & {
background:$_color_light_gamma;
color:$_color_alpha;
}
}

View File

@ -1,20 +1,48 @@
//----------------------------------*\
// TOGGLABLE TABS
//----------------------------------*/
/* */
.tabpanel {
.tablist__item {
display:inline-block;
.tablist__list {
display:block;
}
.tablist__item {
display:block;
float:left;
width:50%;
}
.tabpanel__tab {
border:solid white;
border-width:0 0 1px;
display:block;
line-height:1;
margin:0 4px;
padding:0 $_space .5em 0;
position:relative;
&[aria-expanded="true"] {
border-width:0 0 3px;
color:$_color_omega;
}
.tabpanel__tab {
color:white;
border-bottom:5px solid white;
width:50%;
:first-child > & {
margin-left:0;
}
&:after {
bottom:em($_base_font_size);
content:attr(data-problems);
display:inline-block;
font-size:em(10, $_base_font_size);
position:absolute;
right:0;
}
}
.tab-content {
clear:both;
padding:$_space 0 $_space_narrow;
> .tab-pane {
display:none;
visibility:hidden;

View File

@ -1,37 +1,37 @@
//----------------------------------*\
// VARIABLES
// DEFAULT VARIABLES
//----------------------------------*/
// Image Path
//----------------------------------*/
$_img_path: "../images/" !default;
// Color Schemes
// Colors
//----------------------------------*/
// Light scheme
$_color_light_alpha: '' !default;
$_color_light_beta: '' !default;
$_color_light_gamma: '' !default;
$_color_light_delta: '' !default;
$_color_light_epsilon: red !default;
$_color_light_delta: red !default;
// Dark scheme
$_color_dark_alpha: #353D48 !default;
$_color_dark_beta: #49515C !default;
$_color_dark_gamma: #23282E !default;
$_color_dark_delta: #2e353d !default;
$_color_dark_epsilon: #aeb5bf !default;
$_color_dark_alpha: #252C35 !default;
$_color_dark_beta: #353D48 !default;
$_color_dark_gamma: #49515C !default;
$_color_dark_delta: #A2AAB4 !default;
// Typography
$_base_font_size: 14 !default;
$_base_line_height: 18 !default;
// Black and White
$_color_alpha: #000 !default;
$_color_omega: #FFF !default;
// Colors for states
$_color_error: #E84C3D !default;
$_color_warning: #F9A13B !default;
$_color_ok: #81A854 !default;
// Fonts Family
//----------------------------------*/
$_font_family_alpha: sans-serif !default;
$_font_family_beta: sans-serif !default;
$_font_family_gamma: serif !default;
$_font_family_alpha: 'Roboto', sans-serif !default; // fonts.googleapis.com/css?family=Roboto
// Media Queries Breakpoints
//----------------------------------*/
@ -40,3 +40,13 @@ $_screen_small: 480 !default;
$_screen_medium: 768 !default;
$_screen_large: 992 !default;
$_screen_xlarge: 1200 !default;
// Typography
//----------------------------------*/
$_base_font_size: 14 !default;
$_base_line_height: 18 !default;
// X Y Rhythm
//----------------------------------*/
$_space:30px !default;
$_space_narrow:15px !default;

View File

@ -1,148 +1,244 @@
//----------------------------------*\
// SIDEBAR
//----------------------------------*/
.sidebar-wrapper {
//.color-scheme--dark & {background:$_color_dark_delta;}
@extend %colorBkgPanel;
padding-bottom:em(72+$_space, $_base_font_size);
position:relative;
}
.nav-side-menu {
//overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
//position: fixed;
//top: 0px;
//height: 100%;
color: #e1ffff;
//.sidebar {}
.sidebar__close {
@extend %button-reset;
display:block;
font-size:em(15, $_base_font_size);
height:45px;
margin:0 auto;
text-align:center;
width:45px;
@include large-xlarge-screen {
display:none;
}
.color-scheme--dark & {
background:$_color_dark_beta;
color:$_color_omega;
}
.color-scheme--light & {
background:$_color_light_beta;
color:$_color_alpha;
}
.no-js & {display:none;}
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
.sidebar__header {
text-align:center;
padding:$_space $_space_narrow;
@include large-xlarge-screen {
padding:$_space $_space;
}
}
.nav-side-menu .toggle-btn {
display: none;
.sidebar__appname {
@extend %colorHightContrast;
margin:0;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
.sidebar__date {
@extend %typo-more-info--little;
display:block;
margin-top:$_space_narrow;
.color-scheme--dark & {
color:$_color_dark_gamma;
}
.color-scheme--light & {
color:$_color_light_gamma;
}
}
.sidebar__nav {}
.sidebar__item {
border-top:1px solid;
margin-bottom:$_space;
.color-scheme--dark & {
border-top-color:$_color_dark_gamma;
}
.color-scheme--light & {
border-top-color:$_color_light_gamma;
}
&:first-child {border:0;}
}
.sidebar__category {
@extend %typo-title;
display:block;
position:relative;
padding:$_space $_space_narrow 0 $_space;
@include large-xlarge-screen {
padding:$_space $_space 0;
}
.js & {
cursor:pointer;
}
.color-scheme--dark & {
color:$_color_dark_gamma;
}
.color-scheme--light & {
color:$_color_light_gamma;
}
.sidebar__item:first-child & {padding-top:0;}
&:after {
@extend %ico;
content:"\e801";
display:inline-block;
font-size:1em;
position:absolute;
right:$_space_narrow;
@include large-xlarge-screen {
right:$_space;
}
}
}
.sidebar__sublist {
padding:0 $_space_narrow 0 $_space;
@include large-xlarge-screen {
padding:0 $_space;
}
}
.sidebar__subitem {
@extend %typo-menu;
margin-top:$_space;
.state--current {
color:$_color_omega;
position:relative;
&:before {
@extend %ico;
content:"\e812";
display:inline-block;
font-size:em(8, $_base_font_size);
left:-$_space_narrow;
margin-top:-0.5em;
position:absolute;
top:50%;
}
}
}
.sidebar__profile {
bottom:0;
left:0;
padding:0 $_space_narrow 0 $_space;
position:absolute;
right:0;
@include large-xlarge-screen {
padding:0 $_space;
}
.color-scheme--dark & {
background:$_color_dark_beta;
}
.color-scheme--light & {
background:$_color_light_beta;
}
.sidebar__profile__toggle {
@extend %typo-more-info--little;
color:$_color_omega;
display:block;
line-height:72px;
min-height:72px;
padding-left:(36+15) + px;
position:relative;
text-decoration:none;
&:after {
@extend %ico;
content:"\e809";
display:inline-block;
position:absolute;
right:0;
.color-scheme--dark & {
color:$_color_omega;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
@media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
@media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
.color-scheme--light & {
background:$_color_alpha;
}
}
}
.sidebar__profile__name {
display:inline-block;
line-height:em(18, 12);
vertical-align:middle;
&:before,
&:after {
display:block;
position:absolute;
}
&:before {
border-radius:100%;
content:"";
height:36px;
left:0;
top:18px;
width:36px;
.color-scheme--dark & {
background:$_color_dark_gamma;
}
.color-scheme--light & {
background:$_color_light_gamma;
}
}
&:after {
@extend %ico;
content:"\e800";
font-size:em(24, $_base_font_size);
left:7px;
position:absolute;
top:28px;
.color-scheme--dark & {
color:$_color_dark_alpha;
}
.color-scheme--light & {
color:$_color_light_alpha;
}
}
}
}

View File

@ -1,56 +1,59 @@
<div nv-app="adagios.sidebar" class="nav-side-menu" ng-controller="SideBarCtrl">
<div class="brand">ADAGIOS</div>
<div class="menu-list">
<ul id="menu-content" class="menu-content out">
<li class="menu-title">
<a href="#"> Shortcut <span class="arrow"></span></a>
<ul class="sub-menu" id="shortcut">
<li><a href="#/dashboard">Dashboard</a></li>
<li><a href="#/hosts">Hosts</a></li>
<li><a href="#/services">Services</a></li>
<li><a href="#">Networks parents</a></li>
<div ng-app="adagios.sidebar" class="sidebar" ng-controller="SideBarCtrl">
<button class="sidebar__close">
<span class="visuallyhidden">Close the sidebar</span>
<i class="fa fa-times"></i>
</button>
<header class="sidebar__header">
<h1 class="sidebar__appname">ADAGIOS</h1>
<time class="sidebar__date" datetime="2014-11-24 16:04">24 nov. 16:04</time>
</header>
<nav class="sidebar__nav" role="navigation">
<ul class="sidebar__list" id="sidebarList">
<li class="sidebar__item">
<span class="sidebar__category">Shortcut</span>
<ul class="sidebar__sublist" id="shortcutList">
<li class="sidebar__subitem"><a class="state--current" href="#/tactical">Dashboard</a></li>
<li class="sidebar__subitem"><a href="#/hosts">Hosts</a></li>
<li class="sidebar__subitem"><a href="#">Services</a></li>
<li class="sidebar__subitem"><a href="#">Networks parents</a></li>
</ul>
</li>
<li class="menu-title">
<a href="#"> Reports <span class="arrow"></span></a>
</li>
<ul class="sub-menu" id="reports">
<li><a href="#">State History</a></li>
<li><a href="#">Log</a></li>
<li><a href="#">Comments</a></li>
<li><a href="#">Downtimes</a></li>
</ul>
<li class="menu-title">
<a href="#"> Groups <span class="arrow"></span></a>
<li class="sidebar__item">
<span class="sidebar__category">Reports</span>
<ul class="sidebar__sublist" id="reportsList">
<li class="sidebar__subitem"><a href="#">State History</a></li>
<li class="sidebar__subitem"><a href="#">Log</a></li>
<li class="sidebar__subitem"><a href="#">Comments</a></li>
<li class="sidebar__subitem"><a href="#">Downtimes</a></li>
</ul>
</li>
<ul class="sub-menu" id="groups">
<li><a href="#">Hostgroups</a></li>
<li><a href="#">Servicegroups</a></li>
<li><a href="#">Contactgroups</a></li>
</ul>
<li class="menu-title">
<a href="#"> Other <span class="arrow"></span></a>
<li class="sidebar__item">
<span class="sidebar__category">Groups</span>
<ul class="sidebar__sublist" id="groupsList">
<li class="sidebar__subitem"><a href="#">Hostgroups</a></li>
<li class="sidebar__subitem"><a href="#">Servicegroups</a></li>
<li class="sidebar__subitem"><a href="#">Contactgroups</a></li>
</ul>
</li>
<ul class="sub-menu" id="other">
<li><a href="#">Grafana</a></li>
<li><a href="#">Nagvis</a></li>
</ul>
<li>
<a href="#">
<i class="fa fa-user fa-lg"></i> Profile
</a>
</li>
<li class="sidebar__item">
<span class="sidebar__category">Other</span>
<ul class="sidebar__sublist" id="otherList">
<li class="sidebar__subitem"><a href="#">Grafana</a></li>
<li class="sidebar__subitem"><a href="#">Nagvis</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<footer class="sidebar__profile">
<a class="sidebar__profile__toggle" href="#profile">
<span class="sidebar__profile__name">Jean-Michel <br>Vasquez-Peruz</span>
</a>
</footer>
</div>

View File

@ -1,10 +1,8 @@
#tactical {
background-color: #353d48;
color: white;
padding: 20px;
}
#tactical #summary {
background-color: #49515c;
}
//----------------------------------*\
// TACTICAL
//----------------------------------*/
.current-health {
tbody {
td, th {padding-top:0;}
}
}

View File

@ -1,17 +1,18 @@
<div ng-app="adagios.tactical.current_health" ng-controller="TacticalCurrentHealth" class="row">
<table>
<thead>
<tr>
<th>
Current Health
</th>
</tr>
</thead>
</table>
<div class="col-md-6">
<just-gage id="allservices" class="someClass" min=0 max=100 value=services title="ALL SERVICES"></just-gage>
</div>
<div class="col-md-6">
<just-gage id="allhosts" class="someClass" min=0 max=100 value=hosts title="ALL HOSTS"></just-gage>
</div>
</div>
<table class="current-health" ng-app="adagios.tactical.current_health" ng-controller="TacticalCurrentHealth">
<thead>
<tr>
<th>Current health</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td class="layout__half">
<just-gage id="allservices" class="someClass" min=0 max=100 value=services title="ALL SERVICES"></just-gage>
</td>
<td class="layout__half">
<just-gage id="allhosts" class="someClass" min=0 max=100 value=hosts title="ALL HOSTS"></just-gage>
</td>
</tr>
</tbody>
</table>

View File

@ -1,39 +1,24 @@
<table ng-app="adagios.tactical.status_overview" ng-controller="TacticalStatusOverViewCtrl" class="table">
<table ng-app="adagios.tactical.status_overview" ng-controller="TacticalStatusOverViewCtrl" class="table">
<thead>
<tr>
<th>Status overview</th>
<th>#</th>
<th>
Status overview
</th>
<th>
#
</th>
<th>
<i class="fa fa-bell"></i>
<span class="visuallyhidden">Notifications number</span>
<i class="ico-bell-alt"></i>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
HOSTS
</td>
<td>
{{ hosts.count }}
</td>
<td class="alerts">
{{ hosts.problems }}
</td>
<th>Hosts</th>
<td>{{ hosts.count }}</td>
<td class="state--error alerts">{{ hosts.problems }}</td>
</tr>
<tr>
<td>
SERVICES
</td>
<td>
{{ services.count }}
</td>
<td class="alerts">
{{ services.problems }}
</td>
<th>Services</th>
<td>{{ services.count }}</td>
<td class="state--error alerts">{{ services.problems }}</td>
</tr>
</tbody>
</table>

View File

@ -1,21 +1,24 @@
<div ng-app="adagios.tactical" ng-controller="TacticalCtrl" id="tactical" class="">
<article ng-app="adagios.tactical" ng-controller="TacticalCtrl" id="tactical">
<header class="main__overview">
<h2 class="main__overview__title">Tactical Overview</h2>
<h2>Tactical Overview</h2>
<div id="summary" class="jumbotron">
<div class="row">
<div class="col-md-4">
<adg-status-overview></adg-status-overview>
</div>
<div class="col-md-4">
<adg-current-health></adg-current-health>
</div>
<div class="col-md-4">
<adg-top-alert-producers></adg-top-alert-producers>
</div>
<div class="panes panes--3">
<div class="panes__pane">
<adg-status-overview></adg-status-overview>
</div>
</div>
<div class="panes__pane">
<adg-current-health></adg-current-health>
</div>
</div>
<div class="panes__pane">
<adg-top-alert-producers></adg-top-alert-producers>
</div>
</div>
</header>
<section class="main__content">
<adg-table></adg-table>
</section>
</article>

View File

@ -1,22 +1,14 @@
<table ng-app="adagios.tactical.top_alert_producers" ng-controller="TacticalTopAlertProducers" class="table">
<thead>
<tr>
<th>
Top Alert Producers
</th>
<th>
<i class="fa fa-bell"></i>
</th>
<th>Top alert producers</th>
<th><i class="ico-bell-alt"></i></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="host in hosts">
<td>
{{ host.host_name }}
</td>
<td>
{{ host.problems }}
</td>
<th>{{ host.host_name }}</th>
<td class="state--error">{{ host.problems }}</td>
</tr>
</tbody>
</table>

View File

@ -1,180 +1,221 @@
//----------------------------------*\
// TOPBAR MODULE
//----------------------------------*/
.topbar-wrapper {
border-bottom:1px solid;
@extend %colorBkgTopbar;
@extend %colorBorderThin;
border-bottom:1px solid;
}
.topbar {
a {@extend %colorLink;}
.topbar a {@extend %colorLink;}
&.layout__flexrow {
.flexbox & {}
}
}
.topbar__list {
display:block;
.flexbox .layout__flexrow & {
flex:1;
}
&.topbar__list--left {text-align:left;}
&.topbar__list--right {text-align:right;}
}
.topbar__list {display:block;}
.topbar__item {
@extend %colorBorderThin;
border-right:1px solid;
border:0 solid;
display:inline-block;
float:left;
position:relative;
.topbar__list--right &.topbar__search {
border-left:1px solid;
@extend %colorBorderThin;
.topbar__list--left & {
border-right-width:1px;
float:left;
}
.topbar__button {
@extend %button-reset;
@extend %colorLink;
padding:32px;
.topbar__list--right & {
border-left-width:1px;
float:right;
}
%topbar__panel {
@extend %colorBkgTopbarPanel;
max-width:485px;
min-width:320px;
@extend %colorBkgPanel;
width:320px;
position:absolute;
top:100%;
top:100%;
z-index:999999;
}
.topbar__panel--fromleft {
@extend %topbar__panel;
left:-1px;
left:-81px;
@include medium-and-up-screen {
left:-1px;
width:485px;
}
}
.topbar__panel--fromright {
@extend %topbar__panel;
right:-1px;
right:0;
@include medium-and-up-screen {
width:190px;
}
}
.topbar__panel__content {padding:$_space $_space_narrow 0;}
}
.topbar__button {
@extend %button-reset;
@extend %colorBkgTopbarButton;
@extend %colorLink;
height:80px;
position:relative;
width:79px;
&[aria-expanded="true"] {color:$_color_omega;}
[class^="ico-"],
[class*=" ico-"] {
bottom:30px;
display:block;
font-size:em(20, $_base_font_size);
height:1em;
left:0;
line-height:1em;
margin:0 auto;
position:absolute;
right:0;
text-align:center;
top:auto;
width:1em;
&:before {margin:0;}
}
}
.topbar__toggle-sidebar {
.topbar__button {
position:relative;
&[aria-expanded="true"],
&:hover {
.color-scheme--dark & {
background:$_color_dark_alpha;
}
.color-scheme--light & {
background:$_color_light_alpha;
}
}
}
.ico-menu {
&:after {
//bottom:0;
@extend %ico;
bottom:0;
display:inline-block;
font:normal 10px FontAwesome;
font-size:10px;
margin:auto 0;
position:absolute;
//top:0;
top:0;
}
}
&[aria-expanded="false"]:after {
content:'\f0da';
left:auto;
right:8px;
}
[aria-expanded="false"] .ico-menu:after {
content:'\e808';
right:-7px;
}
&[aria-expanded="true"]:after {
content:'\f0d9';
left:8px;
right:auto;
}
[aria-expanded="true"] .ico-menu:after {
content:'\e807';
left:-7px;
}
}
.topbar__notifications {
.topbar__button {
position:relative;
&[aria-expanded="true"],
&:hover {
.color-scheme--dark & {
background:$_color_dark_alpha;
}
.color-scheme--light & {
background:$_color_light_alpha;
}
}
}
.ico-bell-alt {
&:after {
background:red;
background:$_color_error;
border-radius:100%;
color:white;
color:$_color_omega;
content:attr(data-notifications);
font-size:10px;
font-style:normal;
height:18px;
left:7px;
line-height:18px;
position:absolute;
right:5px;
text-align:center;
top:5px;
top:-9px;
width:18px;
}
}
}
.topbar__search {
.topbar__button {float:left;}
.topbar__search #searchfield {
display:none;
.topbar__searchfield {
background:transparent;
border:0;
display:none;
float:right;
font-size:1em;
height:14px;
margin:36px $_space 0 0;
vertical-align:baseline;
@include medium-and-up-screen {
display:inline-block;
margin-right:15px;
@include large-xlarge-screen {
display:inline-block;
}
}
}
/* #topbar { */
/* border-radius: 0px; */
/* border: none; */
/* height: 82px; */
/* min-height: 82px; */
/* margin-bottom: 0px; */
/* } */
.topbar__settings {
.topbar__button {
&[aria-expanded="true"],
&:hover {
.color-scheme--dark & {
background:$_color_dark_alpha;
}
/* #topbar .container-fluid{ */
/* padding-left: 0px; */
/* } */
.color-scheme--light & {
background:$_color_light_alpha;
}
}
}
/* #topbar .topbar-brand{ padding: 0px 30px;font-size: 1.5em;line-height: 80px; } */
/* #topbar .topbar-nav > li > a { padding: 0px 30px; line-height: 80px; font-size: 1.5em; } */
/* #topbar .topbar-nav > li > form div { */
/* line-height: 55px; */
/* font-size: 1.5em; */
/* } */
/* #topbar .topbar-nav > li > form input { */
/* height: 60px; */
/* } */
.ico-sliders:before {
@include vendor(transform, rotate(90deg));
}
}
.topbar__settings__category {
@extend %typo-title;
display:block;
margin-bottom:$_space;
/* #topbar div.topbar-collapse { */
/* padding-left: 0px; */
/* } */
.color-scheme--dark & {
color:$_color_dark_gamma;
}
/* #search input { */
/* border: none; */
/* background-color: #353d48; */
/* font-size: 1.5em; */
/* color: #aeb5bf; */
/* width: 400px; */
/* } */
.color-scheme--light & {
color:$_color_light_gamma;
}
}
.topbar__settings__item,
.topbar__settings__subitem {display:block;}
/* a#toggle-sidebar .fa-chevron-left { */
/* font-size: 0.5em; */
/* vertical-align: super; */
/* } */
.topbar__settings__subitem {
@extend %typo-menu;
margin-bottom:$_space;
/* #search i, */
/* #settings i, */
/* #notifications i, */
/* #toggle-sidebar i { */
/* font-size: 1.5em; */
/* } */
/* #topbar li { */
/* border-color: #252b37; */
/* border-style: solid; */
/* border-width: 1px; */
/* } */
/* #topbar li #search { */
/* float: left; */
/* } */
a {display:block;}
}

View File

@ -1,4 +1,4 @@
<nav ng-app="adagios.topbar" id="topbar" class="topbar layout__flexrow" role="navigation" ng-controller="TopBarCtrl">
<nav ng-app="adagios.topbar" id="topbar" class="topbar" role="navigation" ng-controller="TopBarCtrl">
<ul class="topbar__list topbar__list--left">
<li class="topbar__item topbar__toggle-sidebar">
<button class="topbar__button"
@ -8,65 +8,108 @@
aria-expanded="false"
aria-controls="sidebarWrapper">
<span class="visuallyhidden">Ouvrir la barre de navigation latérale</span>
<i class="fa fa-bars"></i>
<i class="ico-menu"></i>
</button>
</li>
<li class="topbar__item topbar__notifications">
<button class="topbar__button"
id="notifications"
type="button"
data-notifications="{{ notifications }}"
data-toggle="collapse"
data-target="#notificationsPanel"
aria-expanded="false"
aria-controls="notificationsPanel">
<span class="visuallyhidden">Voir les notifications</span>
<i class="fa fa-bell"></i>
<i class="ico-bell-alt" data-notifications="{{ notifications }}"></i>
</button>
<div class="topbar__panel--fromleft collapse" id="notificationsPanel">
<div class="tabpanel">
<div class="topbar__panel__content tabpanel">
<ul role="tablist">
<li role="presentation" class="tablist__item active">
<a href="#openProblems"
class="tabpanel__tab"
aria-controls="openProblems"
aria-expanded="true"
role="tab"
data-toggle="tab"
data-openproblems="27">Open problems
data-problems="27">Open problems
</a>
</li>
<li role="presentation" class="tablist__item">
<a href="#allProblems"
class="tabpanel__tab"
aria-controls="allProblems"
aria-expanded="false"
role="tab"
data-toggle="tab"
data-allproblems="38">All problems
data-problems="38">All problems
</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="openProblems">Open problems</div>
<div role="tabpanel" class="tab-pane" id="allProblems">All problems</div>
<div role="tabpanel" class="problems tab-pane active" id="openProblems">
<ol class="problems__list">
<li class="problems__item">
<strong class="problems__host state--ok">localhost</strong>
<dl class="problems__desclist">
<dt class="problems__name state--warning">
<span>Root partition</span>
<small class="problems__duration">2 days, 8 hours</small>
</dt>
<dd class="problems__description">Disk warning - free space : / 673 MB (12% inode = 59%)</dd>
</dl>
</li>
<li class="problems__item">
<strong class="problems__host state--warning">www.theatlantic.com</strong>
<dl class="problems__desclist">
<dt class="problems__name state--warning">
<span>HTTP www.theatlantic.com</span>
<small class="problems__duration">6 days, 5 hours</small>
</dt>
<dd class="problems__description">Check_http: invalid onedirection - $</dd>
</dl>
</li>
<li class="problems__item">
<strong class="problems__host state--error">www.savoirfairelinux.com</strong>
<dl class="problems__desclist">
<dt class="problems__name state--warning">
<span>Verbis se superiores opere enim</span>
<small class="problems__duration">8 days, 5 hours</small>
</dt>
<dd class="problems__description">Check_http: invalid onedirection option - $</dd>
<dt class="problems__name state--error">
<span>CPU utilization</span>
<small class="problems__duration">1 days, 3 hours</small>
</dt>
<dd class="problems__description">NRPE: Command checkCPU not defined</dd>
<dt class="problems__name state--ok">
<span>Runnning services</span>
<small class="problems__duration">1 days, 12 hours</small>
</dt>
<dd class="problems__description">Levandi amicitias se fere - $</dd>
</dl>
</li>
</ol>
<button class="problems__viewall" type="button">View all open problems</button>
</div>
<div role="tabpanel" class="tab-pane" id="allProblems">
All problems
</div>
</div>
</div>
</li>
</ul>
<ul class="topbar__list topbar__list--right">
<li class="topbar__item topbar__search">
<form class="topbar-form topbar-left" role="search" id="search">
<button class="topbar__button" id="search" type="submit">
<span class="visuallyhidden">Lancer une recherche</span>
<i class="fa fa-search"></i>
</button>
<label class="visuallyhidden" for="searchfield">Recherche</label>
<input id="searchfield" type="search" class="form-control" placeholder="Search hosts, services, ...">
</form>
</li>
<li class="topbar__item topbar__settings">
<button class="topbar__button"
id="settings"
@ -75,10 +118,45 @@
aria-expanded="false"
aria-controls="settingsPanel">
<span class="visuallyhidden">Afficher la liste des paramètres</span>
<i class="fa fa-sliders fa-rotate-90"></i>
<i class="ico-sliders"></i>
</button>
<div class="topbar__panel--fromright collapse" id="settingsPanel">...</div>
<div class="topbar__panel--fromright collapse" id="settingsPanel">
<nav class="topbar__panel__content" role="navigation">
<ul class="topbar__settings__list">
<li class="topbar__settings__item">
<span class="topbar__settings__category">Adagios</span>
<ul class="topbar__settings__sublist">
<li class="topbar__settings__subitem"><a href="#">Missing Plugins</a></li>
<li class="topbar__settings__subitem"><a href="#">Object History</a></li>
<li class="topbar__settings__subitem"><a href="#">Configure</a></li>
</ul>
</li>
<li class="topbar__settings__item">
<span class="topbar__settings__category">Nagios</span>
<ul class="topbar__settings__sublist">
<li class="topbar__settings__subitem"><a href="#">Settings</a></li>
<li class="topbar__settings__subitem"><a href="#">Edit nagios.cfg</a></li>
<li class="topbar__settings__subitem"><a href="#">Nagios Service</a></li>
<li class="topbar__settings__subitem"><a href="#">Pnp intergration</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</li>
<li class="topbar__item topbar__search">
<form class="topbar-form topbar-left" role="search" id="search">
<button class="topbar__button" type="button">
<span class="visuallyhidden">Lancer une recherche</span>
<i class="ico-search"></i>
</button>
<label class="visuallyhidden" for="searchfield">Recherche</label>
<input id="searchfield" type="search" class="topbar__searchfield form-control" placeholder="Search hosts, services, ...">
</form>
</li>
</ul>
</nav>

View File

@ -8,15 +8,14 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Adagios</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/css/app.css">
<meta name="description" content="">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- Angular -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- Application -->
<script src="app.js"></script>
<script src="components/config/config.js"></script>
@ -48,8 +47,8 @@
<script src="components/table/cell_host_address/cell_host_address.js"></script>
<script src="components/table/cell_host_status/cell_host_status.js"></script>
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<script src="bower_components/moment/moment.js"></script>
<!-- VIEWS -->
<script src="dashboard/dashboard.js"></script>
@ -65,18 +64,19 @@
<aside class="layout__aside sidebar-wrapper collapse" id="sidebarWrapper">
<adg-sidebar></adg-sidebar>
</aside>
<div class="layout__main">
<div class="layout__row topbar-wrapper">
<div class="topbar-wrapper clearfix">
<adg-topbar></adg-topbar>
</div>
<main ng-view id="page" class="main layout__row" role="main"></main>
<footer class="footer layout__row" role="contentinfo">...</footer>
<main ng-view id="page" class="main" role="main"></main>
<footer class="footer" role="contentinfo">...</footer>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/raphael/raphael-min.js"></script>
<script src="bower_components/justgage-toorshia/justgage.js"></script>
<script src="bower_components/justgage-toorshia/justgage.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
<script src="assets/js/scripts.js"></script>
</body>