MIUN - Design Library

Office 365 Block: Offline 

<div class="office-365-block expanded">
    <div class="office-365-header">
        <h2 class="heading-level-2">Min e-post</h2>
        <div class="office-365-actions"><a href="https://google.com" target="_blank">Till e-post</a><button data-toggle="collapse" data-target="#o365-ettid" aria-expanded="true" aria-controls="o365-ettid"><span class="material-icons up-down"></span></button></div>
    </div>
    <div id="o365-ettid" class="office-365-body collapse show warning">
        <div class="office-365-item">
            <span class="material-icons no-connection">signal_wifi_off</span> Ingen koppling till Office 365
        </div>
    </div>
</div>
 
{{#if auth}}
    <div class="office-365-block {{#if expanded}}expanded{{/if}}">
        <div class="office-365-header">
            <h2 class="heading-level-2">{{title}}</h2>
            <div class="office-365-actions"><a href="{{linkUrl}}" target="_blank">{{linkText}}</a><button data-toggle="collapse" data-target="#o365-{{uuid}}" aria-expanded="{{#if expanded}}true{{else}}false{{/if}}" aria-controls="o365-{{uuid}}"><span class="material-icons up-down"></span></button></div>
        </div>
        {{#if offline}}
        <div id="o365-{{uuid}}" class="office-365-body collapse {{#if expanded}}show{{/if}} warning">
            <div class="office-365-item">
                <span class="material-icons no-connection">signal_wifi_off</span> {{offlineText}}
            </div>
        </div>
        {{else}}
        <div id="o365-{{uuid}}" class="office-365-body collapse {{#if expanded}}show{{/if}}">
            {{#each items}}
                <a href="{{url}}" target="_blank">
                    <div class="office-365-item">
                        <div class="item-icon-container">
                            {{#if ../emailLayout}}
                                <div class="item-icon {{userColor}}">
                                    {{initials}}
                                </div>
                            {{/if}}
                            {{#if ../calendarLayout}}
                                <div class="date-icon {{#if today}}today{{/if}}">
                                    {{dateDay}}
                                </div>
                                <div class="date-weekday">{{dateWeekday}}</div>
                            {{/if}}
                        </div>
                        <div class="item-data-container">
                            {{#if ../emailLayout}}
                                <div class="item-data item-data-from {{#unless read}}unread{{/unless}}">{{from}}</div>
                                <div class="item-data item-data-subject {{#unless read}}unread{{/unless}}">{{subject}}</div>
                                <div class="item-data item-data-content">{{content}}</div>
                            {{/if}}
                            {{#if ../calendarLayout}}
                                <div class="item-data item-data-from bold-font">{{title}}</div>
                                <div class="item-data item-data-subject">{{timeStart}}</div>
                                <div class="item-data item-data-content">{{location}}</div>
                            {{/if}}
                        </div>
                        {{#if ../emailLayout}}
                            <div class="item-date-time">{{when}}</div>
                        {{/if}}
                    </div>
                </a>
            {{/each}}
        </div>
        {{/if}}
    </div>
    {{/if}}
 
{
  "auth": true,
  "title": "Min e-post",
  "uuid": "ettid",
  "emailLayout": true,
  "calendarLayout": false,
  "linkText": "Till e-post",
  "linkUrl": "https://google.com",
  "expanded": true,
  "items": [
    {
      "read": false,
      "initials": "KS",
      "userColor": "green",
      "from": "Kristoff Strajovski",
      "subject": "Vem f*n har fyllt skrivarn med ketchup?!",
      "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque quis minus voluptatem esse temporibus fugiat laborum eaque error eligendi aliquid molestias, corporis dolores inventore eos illo at. Ex, aspernatur fugiat.",
      "when": "12.44",
      "url": "https://aftonbladet.se"
    },
    {
      "read": false,
      "initials": "KS",
      "userColor": "purple",
      "from": "Kristoff Strajovski",
      "subject": "Vem f*n har fyllt skrivarn med ketchup?!",
      "content": "Skrivarn printar ketchup vid röd färg överallt, skrivarrummet är övers...",
      "when": "11 jan",
      "url": "https://aftonbladet.se"
    },
    {
      "read": true,
      "initials": "KS",
      "userColor": "dark-green",
      "from": "Kristoff Strajovski",
      "subject": "Vem f*n har fyllt skrivarn med ketchup?!",
      "content": "Skrivarn printar ketchup vid röd färg överallt, skrivarrummet är övers...",
      "when": "5 jan",
      "url": "https://aftonbladet.se"
    },
    {
      "read": true,
      "initials": "KS",
      "userColor": "pink",
      "from": "Kristoff Strajovski",
      "subject": "Vem f*n har fyllt skrivarn med ketchup?!",
      "content": "Skrivarn printar ketchup vid röd färg överallt, skrivarrummet är övers...",
      "when": "1 jan",
      "url": "https://aftonbladet.se"
    }
  ],
  "epiDivClass": "col-md-6",
  "offline": true,
  "offlineText": "Ingen koppling till Office 365"
}
  • Content: 
    $(document).ready(function() {
	$(".office-365-body").on("show.bs.collapse", function() {
		$(this).closest(".office-365-block").addClass("expanded");
	});

	$(".office-365-body").on("hide.bs.collapse", function() {
		$(this).closest(".office-365-block").removeClass("expanded");
    });
});
  • URL: /components/raw/o365/O365.js
  • Filesystem Path: src\components\02-block_components\O365\O365.js
  • Size: 299 Bytes
  • Content: 
    .office-365-block {
    margin-bottom: 50px;

    .office-365-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .office-365-actions {
        button {
            width: 40px;
            height: 40px;
            margin-left: 20px;
            padding: 0;
            border: none;
            border-left: 1px solid #c5c5c5;
            background: transparent;
            font-size: 24px;
            cursor: pointer;
        }
    }

    .office-365-body {
        box-shadow: $box-shadow;

        a {
            text-decoration: none;
        }

        a:hover .office-365-item {
            background-color: $light-blue;
        }

        .office-365-item {
            display: flex;
            position: relative;
            padding: 14px;
            box-shadow: 0px 1px 0px #E5E5E5;

            .item-date-time {
                position: absolute;
                top: 14px;
                right: 14px;
                font-size: 14px;
                color: rgba(0,0,0,.6);
            }

            .item-data-container {
                min-width: 0;
            }

            .item-data-container > .item-data {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .item-icon-container {
                margin-right: 14px;
            }

            .item-icon {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                color: #fff;
                font-family: "Lato Bold";
                text-align: center;
                line-height: 40px;
                background-color: $user-dark-blue;

                &.pink {
                    background-color: $user-pink;
                }
        
                &.purple {
                    background-color: $user-purple;
                }
        
                &.dark-green {
                    background-color: $user-dark-green;
                }
        
                &.dark-blue {
                    background-color: $user-dark-blue;
                }
        
                &.orange {
                    background-color: $user-orange;
                }
        
                &.light-blue {
                    background-color: $user-light-blue;
                }
        
                &.green {
                    background-color: $user-green;
                }
        
                &.red {
                    background-color: $user-red;
                }
            }

            .date-icon {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                font-family: "Lato Bold";
                text-align: center;
                line-height: 38px;
                border: 1px solid $dark-grey;

                &.today {
                    line-height: 36px;
                    border: 2px solid $orange;
                }
            }

            .date-weekday {
                font-size: 14px;
                text-align: center;
            }

            .item-data-from {
                font-size: 16px;

                &.unread {
                    font-family: "Lato Bold";
                }
            }

            .item-data-subject {
                font-size: 14px;

                &.unread {
                    font-family: "Lato Bold";
                }
            }

            .item-data-content {
                font-size: 14px;
                color: rgba(0,0,0,.6);
            }
        }
    }

    .material-icons {
        vertical-align: middle;
    }

    .material-icons.up-down:before {
        content: 'keyboard_arrow_down';
        font-size: 24px;
    }

    &.expanded {
        .material-icons.up-down:before {
            content: 'keyboard_arrow_up';
        }
    }

    .no-connection {
        margin-right: 10px;
    }
}
  • URL: /components/raw/o365/O365.scss
  • Filesystem Path: src\components\02-block_components\O365\O365.scss
  • Size: 4.1 KB

There are no notes for this item.