MIUN - Design Library

Office 365 Block: Email 

<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-randomstring" aria-expanded="true" aria-controls="o365-randomstring"><span class="material-icons up-down"></span></button></div>
    </div>
    <div id="o365-randomstring" class="office-365-body collapse show">
        <a href="https://aftonbladet.se" target="_blank">
            <div class="office-365-item">
                <div class="item-icon-container">
                    <div class="item-icon green">
                        KS
                    </div>
                </div>
                <div class="item-data-container">
                    <div class="item-data item-data-from unread">Kristoff Strajovski</div>
                    <div class="item-data item-data-subject unread">Vem f*n har fyllt skrivarn med ketchup?!</div>
                    <div class="item-data item-data-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.</div>
                </div>
                <div class="item-date-time">12.44</div>
            </div>
        </a>
        <a href="https://aftonbladet.se" target="_blank">
            <div class="office-365-item">
                <div class="item-icon-container">
                    <div class="item-icon purple">
                        KS
                    </div>
                </div>
                <div class="item-data-container">
                    <div class="item-data item-data-from unread">Kristoff Strajovski</div>
                    <div class="item-data item-data-subject unread">Vem f*n har fyllt skrivarn med ketchup?!</div>
                    <div class="item-data item-data-content">Skrivarn printar ketchup vid röd färg överallt, skrivarrummet är övers...</div>
                </div>
                <div class="item-date-time">11 jan</div>
            </div>
        </a>
        <a href="https://aftonbladet.se" target="_blank">
            <div class="office-365-item">
                <div class="item-icon-container">
                    <div class="item-icon dark-green">
                        KS
                    </div>
                </div>
                <div class="item-data-container">
                    <div class="item-data item-data-from ">Kristoff Strajovski</div>
                    <div class="item-data item-data-subject ">Vem f*n har fyllt skrivarn med ketchup?!</div>
                    <div class="item-data item-data-content">Skrivarn printar ketchup vid röd färg överallt, skrivarrummet är övers...</div>
                </div>
                <div class="item-date-time">5 jan</div>
            </div>
        </a>
        <a href="https://aftonbladet.se" target="_blank">
            <div class="office-365-item">
                <div class="item-icon-container">
                    <div class="item-icon pink">
                        KS
                    </div>
                </div>
                <div class="item-data-container">
                    <div class="item-data item-data-from ">Kristoff Strajovski</div>
                    <div class="item-data item-data-subject ">Vem f*n har fyllt skrivarn med ketchup?!</div>
                    <div class="item-data item-data-content">Skrivarn printar ketchup vid röd färg överallt, skrivarrummet är övers...</div>
                </div>
                <div class="item-date-time">1 jan</div>
            </div>
        </a>
    </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": "randomstring",
  "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"
}
  • 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.