MIUN - Design Library

Office 365 Block: Calendar 

<div class="office-365-block expanded">
    <div class="office-365-header">
        <h2 class="heading-level-2">Min kalender</h2>
        <div class="office-365-actions"><a href="https://google.com" target="_blank">Till kalender</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://blocket.se" target="_blank">
            <div class="office-365-item">
                <div class="item-icon-container">
                    <div class="date-icon today">
                        19
                    </div>
                    <div class="date-weekday">Tis</div>
                </div>
                <div class="item-data-container">
                    <div class="item-data item-data-from bold-font">Avstämningsmöte kommunikationsplattform</div>
                    <div class="item-data item-data-subject">11:00</div>
                    <div class="item-data item-data-content">Hus A, rum 211</div>
                </div>
            </div>
        </a>
        <a href="https://blocket.se" target="_blank">
            <div class="office-365-item">
                <div class="item-icon-container">
                    <div class="date-icon ">
                        21
                    </div>
                    <div class="date-weekday">Tor</div>
                </div>
                <div class="item-data-container">
                    <div class="item-data item-data-from bold-font">Avstämningsmöte kommunikationsplattform</div>
                    <div class="item-data item-data-subject">11:00</div>
                    <div class="item-data item-data-content">Hus A, rum 211</div>
                </div>
            </div>
        </a>
        <a href="https://blocket.se" target="_blank">
            <div class="office-365-item">
                <div class="item-icon-container">
                    <div class="date-icon ">
                        24
                    </div>
                    <div class="date-weekday">Mån</div>
                </div>
                <div class="item-data-container">
                    <div class="item-data item-data-from bold-font">Avstämningsmöte kommunikationsplattform</div>
                    <div class="item-data item-data-subject">11:00</div>
                    <div class="item-data item-data-content">Hus A, rum 211</div>
                </div>
            </div>
        </a>
        <a href="https://blocket.se" target="_blank">
            <div class="office-365-item">
                <div class="item-icon-container">
                    <div class="date-icon ">
                        25
                    </div>
                    <div class="date-weekday">Tis</div>
                </div>
                <div class="item-data-container">
                    <div class="item-data item-data-from bold-font">Avstämningsmöte kommunikationsplattform</div>
                    <div class="item-data item-data-subject">11:00</div>
                    <div class="item-data item-data-content">Hus A, rum 211</div>
                </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 kalender",
  "uuid": "randomstring",
  "emailLayout": null,
  "calendarLayout": true,
  "linkText": "Till kalender",
  "linkUrl": "https://google.com",
  "expanded": true,
  "items": [
    {
      "today": true,
      "dateDay": "19",
      "dateWeekday": "Tis",
      "title": "Avstämningsmöte kommunikationsplattform",
      "timeStart": "11:00",
      "timeEnd": "11:30",
      "location": "Hus A, rum 211",
      "url": "https://blocket.se"
    },
    {
      "today": false,
      "dateDay": "21",
      "dateWeekday": "Tor",
      "title": "Avstämningsmöte kommunikationsplattform",
      "timeStart": "11:00",
      "timeEnd": "11:30",
      "location": "Hus A, rum 211",
      "url": "https://blocket.se"
    },
    {
      "today": false,
      "dateDay": "24",
      "dateWeekday": "Mån",
      "title": "Avstämningsmöte kommunikationsplattform",
      "timeStart": "11:00",
      "timeEnd": "11:30",
      "location": "Hus A, rum 211",
      "url": "https://blocket.se"
    },
    {
      "today": false,
      "dateDay": "25",
      "dateWeekday": "Tis",
      "title": "Avstämningsmöte kommunikationsplattform",
      "timeStart": "11:00",
      "timeEnd": "11:30",
      "location": "Hus A, rum 211",
      "url": "https://blocket.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.