2sxc:强制菜单在从右到左div内部从左到右显示的任何方式

时间:2016-09-11 06:25:20

标签: 2sxc

早上好, 是否有任何方法可以实现结果中的结果?

蓝色(右侧)是当前显示的方式。 橙色(左侧)是我希望它显示的方式 Current and required

编辑:

这是CSHTML snipet:

@using Extensions;
@using ToSic.SexyContent;
@using System.Collections;
@using System.Web.UI;
@using DotNetNuke.Security.Permissions;

<link rel="stylesheet" data-enableoptimizations="true" href="@App.Path/assets/Announcements.css" />

@if ((Dnn.User.IsSuperUser == false) || (Dnn.User.IsInRole("Administrators") == false))
{
    <style>
        .sc-content-block-quick-insert {
            display: none !important;
        }

        div.sc-cb-highlight-for-insert {
            background: none !important;
        }
    </style>
}
else
{
    <style>
        .sc-menu-a  { 
            width: 28px!important;
            height: 28px!important;
            line-height:28px!important;
            background-color: #0088f4;
            border-style: solid; 
            box-sizing: content-box;
            border-radius: 3px;
            -webkit-border-radius: 3px; 
            -moz-border-radius: 3px;
            color: #fff; 
            text-align: center; 
            font-size: 15px;
            background-color: purple;
        }
    </style>
}
<script src="~/DesktopModules/ToSIC_SexyContent/JS/2sxc.api.min.js" data-enableoptimizations="100"></script>
<script src="~/DesktopModules/ToSIC_SexyContent/Js/AngularJS/angular.min.js" data-enableoptimizations="101"></script>
<script src="~/DesktopModules/ToSIC_SexyContent/Js/AngularJS/2sxc4ng.min.js" data-enableoptimizations="110"></script>
@functions
{
    public HtmlString GetFiles(ToSic.SexyContent.DynamicEntity dynEntContent, bool bReverse = false)
    {
        var lFiles = AsAdam(dynEntContent, "Attachments").Files.ToList();
        var iFilesCount = lFiles.Count();
        var iTmp = 0;
        var sRawHtmlString = "";

        if (bReverse)
        {
            lFiles.Reverse();
        }

        if (iFilesCount > 0)
        {
            // sRawHtmlString = "&#x00AB;&nbsp;\r\n"; /* "«" */
            sRawHtmlString = "«&nbsp;\r\n"; /* "&#x00AB;" */

            foreach(var file in lFiles)
            {
                sRawHtmlString += "\t\t\t\t\t\t<" + $"a href='{@file.Url}'>{@file.FileName}</" + "a>";
                sRawHtmlString += ((++iTmp < iFilesCount) ? "&nbsp;‖\r\n" : "");
            }

            // sRawHtmlString += "\r\n\t\t\t\t&nbsp;&#x00BB;"; /* "»" */
            sRawHtmlString += "\r\n\t\t\t\t\t&nbsp;»"; /* "&#x00BB;" */
        }

        return (@Html.Raw(sRawHtmlString));
    }
}
<div class="app-announcments app-announcments-list">
    <h2>
        <div id="ulItem_Menu_(U)" name="ulItem_Menu_(U)" style="width: 100%; direction: ltr;">
            <table style="width: 100%; padding: 0 5px 0 5px; border: solid 1pt black;" cellpadding="0" cellspacing="0">
                <tr style="height: 55px;">
                    <td style="width: auto;" valign="top">
                        @if (Dnn.User.IsSuperUser)
                        {
                            @Edit.Toolbar(ListContent)
                        }
                        @if ((Dnn.User.IsInRole("Announcements")) && (Dnn.User.IsSuperUser == false))
                        {
                            @Edit.Toolbar(actions: "new",
                                            contentType: "Announcements",
                                            prefill: new {
                                                UID = @Dnn.User.UserID,
                                                PublishDate = DateTime.Now.ToString("yyyy-MM-dd HH:mm"),
                                                PublishedBy = Dnn.User.FullName 
                                            }
                                         )
                        }&nbsp;
                    </td>
                    <td style="text-align: right;">
                        לוח מודעות
                    </td>
                </tr>
            </table>
        </div>
    </h2>
    @foreach(var li in List)
    {
        var anContent = li.Content;
        var sMnuItem = "ulItem_" + anContent.EntityId + "_Menu_" + ((Dnn.User.IsSuperUser) ? "(SU)" : "(U)");

        var sAdminCommands = "[ " +
                                "{" +
                                " \"attributeSetName\" : \"Announcements\"," +
                                " \"action\" : \"new\"," +
                                " \"sortOrder\" : 0," +
                                " \"prefill\" : {" +
                                " \"UID\" : " + Dnn.User.UserID + "," +
                                " \"PublishDate\" : \"" + DateTime.Now.ToString("yyyy-MM-dd HH:mm") + "\"," +
                                " \"PublishedBy\" : \"" + Dnn.User.FullName + "\"" +
                                " } " +
                                "}, " +
                                "{" +
                                " \"attributeSetName\" : \"Announcements\"," +
                                " \"entityId\" : \"" + anContent.EntityId + "\"," +
                                " \"action\" : \"edit\"," +
                                " \"sortOrder\" : 0 " +
                                "}, " +
                                "{" +
                                " \"attributeSetName\" : \"Announcements\"," +
                                " \"entityId\" : \"" + anContent.EntityId + "\"," +
                                " \"action\" : \"remove\"," +
                                " \"sortOrder\" : 0 " +
                                "}, " +
                                // "{" +
                                // " \"attributeSetName\" : \"Announcements\"," +
                                // " \"action\" : \"replace\" " +
                                // "}, " +
                                "{" +
                                " \"entityId\" : \"" + anContent.EntityId + "\"," +
                                " \"attributeSetName\" : \"Announcements\"," +
                                " \"action\" : \"publish\"," +
                                " \"sortOrder\" : 0 " +
                                "}, " +
                                "{" +
                                " \"attributeSetName\" : \"Announcements\"," +
                                " \"action\" : \"more\"," +
                                " \"sortOrder\" : 0 " +
                                "}" +
                            " ]";

        var sUserCommandsInAnnouncement = "[ " +
                                "{" +
                                " \"attributeSetName\" : \"Announcements\"," +
                                " \"action\" : \"new\"," +
                                " \"sortOrder\" : 0," +
                                " \"prefill\" : {" +
                                " \"UID\" : " + Dnn.User.UserID + "," +
                                " \"PublishDate\" : \"" + DateTime.Now.ToString("yyyy-MM-dd HH:mm") + "\"," +
                                " \"PublishedBy\" : \"" + Dnn.User.FullName + "\"" +
                                " } " +
                                "}, " +
                                "{" +
                                " \"attributeSetName\" : \"Announcements\"," +
                                " \"entityId\" : \"" + anContent.EntityId + "\"," +
                                " \"action\" : \"edit\"," +
                                " \"sortOrder\" : 0 " +
                                "}, " +
                                "{" +
                                " \"attributeSetName\" : \"Announcements\"," +
                                " \"entityId\" : \"" + anContent.EntityId + "\"," +
                                " \"action\" : \"remove\"," +
                                " \"sortOrder\" : 0 " +
                                "}, " +
                                "{" +
                                " \"entityId\" : \"" + anContent.EntityId + "\"," +
                                " \"attributeSetName\" : \"Announcements\"," +
                                " \"action\" : \"publish\"," +
                                " \"sortOrder\" : 0 " +
                                "}, " +
                                "{" +
                                " \"attributeSetName\" : \"Announcements\"," +
                                " \"action\" : \"more\"," +
                                " \"sortOrder\" : 0 " +
                                "}" +
                            " ]";
    <hr/>
    <div class="app-announcments-item sc-element">
        <div name="divInfoInAnnouncement">
            @if (Dnn.User.IsSuperUser)
            {
            <!-- ## [Super User] block : BEGIN (line 152) ## -->
                <ul id='@sMnuItem' name='@sMnuItem' class='sc-menu' data-toolbar='@Html.Raw(@sAdminCommands)'></ul>
            <!-- ## [Super User] block : END (line 154) ## -->
            }
            @if ((Dnn.User.IsInRole("Announcements")) && (Dnn.User.IsSuperUser == false))
            {
            <!-- ## [Announcements User] block: BEGIN (line 158) ## -->
                <ul id='@sMnuItem' name='@sMnuItem' class='sc-menu' data-toolbar='@Html.Raw(@sUserCommandsInAnnouncement)'></ul>
            <!-- ## [Announcements User] block: END (line 160) ## -->
            }
        </div>
        <div class="app-announcments-link" title="@anContent.AnnouncementTitle">
            <table class="app-announcments-text" style="width: 100%; padding: 0 10px 10px 10px;" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <h4>@anContent.AnnouncementTitle</h4>
                        פורסם על ידי:
                        <a href="mailto:@Dnn.User.Email" alt="@Dnn.User.Email">@anContent.PublishedBy</a>
                    </td>
                    <td valign="top">
                        <span class="app-announcments-date">@anContent.PublishDate.ToString("yyyy-MM-dd HH:mm")</span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2"><hr /></td>
                </tr>
                <tr>
                    <td colspan="2">
                        @Html.Raw(anContent.AnnouncementBody)
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        @if (AsAdam(anContent, "Attachments").Files.Count > 0)
                        {
                            <div id="divFiles" name="divFiles" style="height: 1em; font-size: 14pt; text-align: center; background: #f3f3f3; color: black; direction: ltr; padding: 5px 0 5px 0;">
                                @GetFiles(anContent, false)
                            </div>
                        }
                    </td>
                </tr>
            </table>
        </div>
    </div>
    } @* foreach(var li in List) *@
</div>

@using Extensions; @using ToSic.SexyContent; @using System.Collections; @using System.Web.UI; @using DotNetNuke.Security.Permissions; <link rel="stylesheet" data-enableoptimizations="true" href="@App.Path/assets/Announcements.css" /> @if ((Dnn.User.IsSuperUser == false) || (Dnn.User.IsInRole("Administrators") == false)) { <style> .sc-content-block-quick-insert { display: none !important; } div.sc-cb-highlight-for-insert { background: none !important; } </style> } else { <style> .sc-menu-a { width: 28px!important; height: 28px!important; line-height:28px!important; background-color: #0088f4; border-style: solid; box-sizing: content-box; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; color: #fff; text-align: center; font-size: 15px; background-color: purple; } </style> } <script src="~/DesktopModules/ToSIC_SexyContent/JS/2sxc.api.min.js" data-enableoptimizations="100"></script> <script src="~/DesktopModules/ToSIC_SexyContent/Js/AngularJS/angular.min.js" data-enableoptimizations="101"></script> <script src="~/DesktopModules/ToSIC_SexyContent/Js/AngularJS/2sxc4ng.min.js" data-enableoptimizations="110"></script> @functions { public HtmlString GetFiles(ToSic.SexyContent.DynamicEntity dynEntContent, bool bReverse = false) { var lFiles = AsAdam(dynEntContent, "Attachments").Files.ToList(); var iFilesCount = lFiles.Count(); var iTmp = 0; var sRawHtmlString = ""; if (bReverse) { lFiles.Reverse(); } if (iFilesCount > 0) { // sRawHtmlString = "&#x00AB;&nbsp;\r\n"; /* "«" */ sRawHtmlString = "«&nbsp;\r\n"; /* "&#x00AB;" */ foreach(var file in lFiles) { sRawHtmlString += "\t\t\t\t\t\t<" + $"a href='{@file.Url}'>{@file.FileName}</" + "a>"; sRawHtmlString += ((++iTmp < iFilesCount) ? "&nbsp;‖\r\n" : ""); } // sRawHtmlString += "\r\n\t\t\t\t&nbsp;&#x00BB;"; /* "»" */ sRawHtmlString += "\r\n\t\t\t\t\t&nbsp;»"; /* "&#x00BB;" */ } return (@Html.Raw(sRawHtmlString)); } } <div class="app-announcments app-announcments-list"> <h2> <div id="ulItem_Menu_(U)" name="ulItem_Menu_(U)" style="width: 100%; direction: ltr;"> <table style="width: 100%; padding: 0 5px 0 5px; border: solid 1pt black;" cellpadding="0" cellspacing="0"> <tr style="height: 55px;"> <td style="width: auto;" valign="top"> @if (Dnn.User.IsSuperUser) { @Edit.Toolbar(ListContent) } @if ((Dnn.User.IsInRole("Announcements")) && (Dnn.User.IsSuperUser == false)) { @Edit.Toolbar(actions: "new", contentType: "Announcements", prefill: new { UID = @Dnn.User.UserID, PublishDate = DateTime.Now.ToString("yyyy-MM-dd HH:mm"), PublishedBy = Dnn.User.FullName } ) }&nbsp; </td> <td style="text-align: right;"> לוח מודעות </td> </tr> </table> </div> </h2> @foreach(var li in List) { var anContent = li.Content; var sMnuItem = "ulItem_" + anContent.EntityId + "_Menu_" + ((Dnn.User.IsSuperUser) ? "(SU)" : "(U)"); var sAdminCommands = "[ " + "{" + " \"attributeSetName\" : \"Announcements\"," + " \"action\" : \"new\"," + " \"sortOrder\" : 0," + " \"prefill\" : {" + " \"UID\" : " + Dnn.User.UserID + "," + " \"PublishDate\" : \"" + DateTime.Now.ToString("yyyy-MM-dd HH:mm") + "\"," + " \"PublishedBy\" : \"" + Dnn.User.FullName + "\"" + " } " + "}, " + "{" + " \"attributeSetName\" : \"Announcements\"," + " \"entityId\" : \"" + anContent.EntityId + "\"," + " \"action\" : \"edit\"," + " \"sortOrder\" : 0 " + "}, " + "{" + " \"attributeSetName\" : \"Announcements\"," + " \"entityId\" : \"" + anContent.EntityId + "\"," + " \"action\" : \"remove\"," + " \"sortOrder\" : 0 " + "}, " + // "{" + // " \"attributeSetName\" : \"Announcements\"," + // " \"action\" : \"replace\" " + // "}, " + "{" + " \"entityId\" : \"" + anContent.EntityId + "\"," + " \"attributeSetName\" : \"Announcements\"," + " \"action\" : \"publish\"," + " \"sortOrder\" : 0 " + "}, " + "{" + " \"attributeSetName\" : \"Announcements\"," + " \"action\" : \"more\"," + " \"sortOrder\" : 0 " + "}" + " ]"; var sUserCommandsInAnnouncement = "[ " + "{" + " \"attributeSetName\" : \"Announcements\"," + " \"action\" : \"new\"," + " \"sortOrder\" : 0," + " \"prefill\" : {" + " \"UID\" : " + Dnn.User.UserID + "," + " \"PublishDate\" : \"" + DateTime.Now.ToString("yyyy-MM-dd HH:mm") + "\"," + " \"PublishedBy\" : \"" + Dnn.User.FullName + "\"" + " } " + "}, " + "{" + " \"attributeSetName\" : \"Announcements\"," + " \"entityId\" : \"" + anContent.EntityId + "\"," + " \"action\" : \"edit\"," + " \"sortOrder\" : 0 " + "}, " + "{" + " \"attributeSetName\" : \"Announcements\"," + " \"entityId\" : \"" + anContent.EntityId + "\"," + " \"action\" : \"remove\"," + " \"sortOrder\" : 0 " + "}, " + "{" + " \"entityId\" : \"" + anContent.EntityId + "\"," + " \"attributeSetName\" : \"Announcements\"," + " \"action\" : \"publish\"," + " \"sortOrder\" : 0 " + "}, " + "{" + " \"attributeSetName\" : \"Announcements\"," + " \"action\" : \"more\"," + " \"sortOrder\" : 0 " + "}" + " ]"; <hr/> <div class="app-announcments-item sc-element"> <div name="divInfoInAnnouncement"> @if (Dnn.User.IsSuperUser) { <!-- ## [Super User] block : BEGIN (line 152) ## --> <ul id='@sMnuItem' name='@sMnuItem' class='sc-menu' data-toolbar='@Html.Raw(@sAdminCommands)'></ul> <!-- ## [Super User] block : END (line 154) ## --> } @if ((Dnn.User.IsInRole("Announcements")) && (Dnn.User.IsSuperUser == false)) { <!-- ## [Announcements User] block: BEGIN (line 158) ## --> <ul id='@sMnuItem' name='@sMnuItem' class='sc-menu' data-toolbar='@Html.Raw(@sUserCommandsInAnnouncement)'></ul> <!-- ## [Announcements User] block: END (line 160) ## --> } </div> <div class="app-announcments-link" title="@anContent.AnnouncementTitle"> <table class="app-announcments-text" style="width: 100%; padding: 0 10px 10px 10px;" cellpadding="0" cellspacing="0"> <tr> <td> <h4>@anContent.AnnouncementTitle</h4> פורסם על ידי: <a href="mailto:@Dnn.User.Email" alt="@Dnn.User.Email">@anContent.PublishedBy</a> </td> <td valign="top"> <span class="app-announcments-date">@anContent.PublishDate.ToString("yyyy-MM-dd HH:mm")</span> </td> </tr> <tr> <td colspan="2"><hr /></td> </tr> <tr> <td colspan="2"> @Html.Raw(anContent.AnnouncementBody) </td> </tr> <tr> <td colspan="2"> @if (AsAdam(anContent, "Attachments").Files.Count > 0) { <div id="divFiles" name="divFiles" style="height: 1em; font-size: 14pt; text-align: center; background: #f3f3f3; color: black; direction: ltr; padding: 5px 0 5px 0;"> @GetFiles(anContent, false) </div> } </td> </tr> </table> </div> </div> } @* foreach(var li in List) *@ </div>

...和(大部分)CSS - 我删除了一些不相关的内容。 (大多数代码css来自原始的“新闻 - 简单”2sxc应用程序):


    /* Detail Styles */
    .app-announcments-detail .app-announcments-image {
        /* margin-bottom: 20px; */ border-radius: 4px;
    }

    .app-announcments-detail-trimmed {
        -o-text-overflow: ellipsis;     /* Opera                     */
        text-overflow:    ellipsis;     /* IE, Safari (WebKit)       */
        overflow: hidden;               /* don't show excess chars   */
        white-space: nowrap;            /* force single line         */
        /* margin-bottom: 25px; */
        width: 300px;                   /* fixed width               */
        height: 50px;                   /* Fixed height              */
    }

    /* List Styles */
    .app-announcments-item .app-announcments-image {
        float: left; width: 38.19% /* Golden Ratio */; /* padding: 0 10px 10px 0;  */
    }

    .app-announcments-item {
        padding-bottom: 20px; margin-bottom: 0px;
    }

    div.app-announcments-link {
        display: block; text-decoration: none; color: #666;
        /* background-color: #fcfcfc; */ background-color: white;
        /* padding: 10px 10px 0 10px; */ overflow: hidden;
        border-radius: 4px;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(204,204,204,1);
        -moz-box-shadow: 0px 0px 10px 0px rgba(204,204,204,1);
        box-shadow: 0px 0px 10px 0px rgba(204,204,204,1);
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease; -o-transition: all 1s ease;
        transition: all 1s ease; 
    }

    div.app-announcments-link:hover,
    div.app-announcments-link:focus {
        border-radius: 6px; /* background-color: #eee; */
        background-color: #f3f3f3; -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease; transition: all 1s ease;
    }

    div.app-announcments-link:hover h3,
    div.app-announcments-link:focus h3,
    div.app-announcments-link:hover h2,
    div.app-announcments-link:focus h2 {
        color: #000; -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease; -o-transition: all 1s ease;
        transition: all 1s ease;
    }

    /* Buttons */
    div.app-announcments-button,
    .app-announcments-button {
        /* padding: 10px; */ background: #666; color: white;
        display: inline-block; border-radius: 2px;
    }

    div.app-announcments-link:hover .app-announcments-button,
    div.app-announcments-link:focus .app-announcments-button,
    div.app-announcments-button:hover,
    div.app-announcments-button:focus {
        background: #000; -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease; -o-transition: all 1s ease;
        transition: all 1s ease;
    }
    /************************/
    table.app-announcments-link {
        display: block; text-decoration: none; color: #666;
        /* background-color: #fcfcfc; */ background-color: white;
        /* padding: 10px 10px 0 10px; */
        overflow: hidden; border-radius: 4px;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(204,204,204,1);
        -moz-box-shadow: 0px 0px 10px 0px rgba(204,204,204,1);
        box-shadow: 0px 0px 10px 0px rgba(204,204,204,1);
        -webkit-transition: all 1s ease; -moz-transition: all 1s ease;
        -o-transition: all 1s ease; transition: all 1s ease;
    }

    table.app-announcments-link:hover,
    table.app-announcments-link:focus {
        border-radius: 6px; /* background-color: #eee; */
        background-color: #f3f3f3; -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease; transition: all 1s ease;
    }

    table.app-announcments-link:hover h3,
    table.app-announcments-link:focus h3,
    table.app-announcments-link:hover h2,
    table.app-announcments-link:focus h2 {
        color: #000; -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease; transition: all 1s ease;
    }

    /* Buttons */
    table.app-announcments-button,
    .app-announcments-button {
        /* padding: 10px; */ background: #666; color: white;
        display: inline-block; border-radius: 2px;
    }

    table.app-announcments-link:hover .app-announcments-button,
    table.app-announcments-link:focus .app-announcments-button,
    table.app-announcments-button:hover,
    table.app-announcments-button:focus {
        background: #000; -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease; -o-transition: all 1s ease;
        transition: all 1s ease;
    }

1 个答案:

答案 0 :(得分:0)

我认为这只是所有css规则。当然,你必须覆盖原文 - 使用更强的选择器(而不是“.sc-menu {}”使用“.sc-menu.sc-ltr {...}”然后你将拥有花一些时间摆弄CSS直到它工作。请发布你的结果,所以我们可以把它包含在2sxc。