Skip to content

Commit

Permalink
UI improvements on sidebar and multinode buttons (#84)
Browse files Browse the repository at this point in the history
  • Loading branch information
@my8100
my8100 authored Aug 15, 2019
1 parent 39dd166 commit 6033e7e
Show file tree
Hide file tree
Showing 29 changed files with 183 additions and 121 deletions.
2 changes: 1 addition & 1 deletion scrapydweb/default_settings.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@
########## slack ##########
# How to create a slack app:
# 1. Visit https://api.slack.com/apps and press the "Create New App" button.
# 2. Enter your App Name (e.g. mybot)and select one of your Slack Workspaces, the press "Create App".
# 2. Enter your App Name (e.g. myapp)and select one of your Slack Workspaces, the press "Create App".
# 3. Click the "OAuth & Permissions" menu in the sidebar on the left side of the page.
# 4. Scroll down the page and find out "Select Permission Scopes" in the "Scopes" section
# 5. Enter "send" and select "Send messages as <your-app-name>", then press "Save Changes"
Expand Down
4 changes: 2 additions & 2 deletions scrapydweb/run.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,8 @@ def load_custom_settings(config):
"Then add your SCRAPYD_SERVERS in the config file and restart scrapydweb.\n".format(
file=SCRAPYDWEB_SETTINGS_PY))
else:
sys.exit("\nATTENTION:\nYou may encounter ERROR if there are any timer tasks added in v1.2.0,\n"
"and you have to restart scrapydweb and manually restart the stopped tasks.\n"
sys.exit("\nATTENTION:\nYou may encounter ERROR if there are any running timer tasks added in v1.2.0,\n"
"and you have to restart scrapydweb and manually edit the tasks to resume them.\n"
"\nThe config file '{file}' has been copied to current working directory.\n"
"Please add your SCRAPYD_SERVERS in the config file and restart scrapydweb.\n".format(
file=SCRAPYDWEB_SETTINGS_PY))
Expand Down
59 changes: 45 additions & 14 deletions scrapydweb/static/v130/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,14 +75,18 @@ ol {
list-style: none;
}

ul#links{
position: absolute;
bottom: 0;
margin-top: 30px;
margin-bottom: 30px;
}
@media (max-height: 800px) {
ul#links { position: relative; }
/* ul#links{ */
/* position: absolute; */
/* bottom: 0; */
/* margin-top: 30px; */
/* margin-bottom: 30px; */
/* } */
/* @media (max-height: 800px) { */
/* ul#links { position: relative; } */
/* } */

.github {
margin: 16px 0 16px 20px;
}

.clear-float {
Expand Down Expand Up @@ -206,12 +210,23 @@ main>aside {
box-sizing: border-box;
min-width: 160px;
background-color: #343131;
padding: 50px 0;
/* padding: 50px 0; */
padding-top: 24px;
display: flex;
flex-direction: column;
overflow-y: auto;
/* overflow-y: hidden; */
/* flex-grow: 1; */
/* overflow-y: scroll; */
}

main>aside:hover {
/* overflow-y: scroll; */
}

main>aside h3 {
color: #fcfcfc;
line-height: 40px;
line-height: 32px;
cursor: default;
font-size: 16px;
padding: 0 20px;
Expand All @@ -222,12 +237,18 @@ main>aside a {
box-sizing: border-box;
width: 100%;
display: inline-block;
line-height: 30px;
line-height: 24px;
padding-left: 20px;
font-size: 14px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

main>aside ul {
transition: height .1s ease-in-out;
overflow: hidden;
/* height: auto; */
}

main>aside li a:hover {
background: #fcfcfc;
fill: #555;
Expand All @@ -244,10 +265,10 @@ main>aside li a > span {
}


main>aside li#scrapydweb_version{
main>aside #scrapydweb_version{
color: #67c23a;
height: 30px;
padding-left: 20px;
padding-left: 0px;
}

main>aside li#pypi{height: 35px;}
Expand Down Expand Up @@ -288,7 +309,7 @@ main>.content-wrap {
overflow-x: hidden;
overflow-y: scroll;
margin-right: -15px;
padding: 16px 48px;
padding: 16px 24px;
/* font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', monospace; */
font-family: "Gotham Rounded A", "Gotham Rounded B", "Gotham Rounded", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
Expand Down Expand Up @@ -707,25 +728,35 @@ table>tbody tr:last-child {

/* https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp START */
/* Width */
main>aside::-webkit-scrollbar,
.folders-content::-webkit-scrollbar,
#checkboxes::-webkit-scrollbar {
width: 10px;
}

/* Track */
main>aside::-webkit-scrollbar-track,
.folders-content::-webkit-scrollbar-track,
#checkboxes::-webkit-scrollbar-track {
border-radius: 10px;
}

/* Handle */
main>aside::-webkit-scrollbar-thumb {
background: #bdbdbd;
border-radius: 10px;
}
.folders-content::-webkit-scrollbar-thumb,
#checkboxes::-webkit-scrollbar-thumb {
background: #9093994d;
border-radius: 10px;
}

/* Handle on hover */
main>aside::-webkit-scrollbar-thumb:hover {
background: #9e9e9e;
/* opacity: 0.7; */
}
.folders-content::-webkit-scrollbar-thumb:hover,
#checkboxes::-webkit-scrollbar-thumb:hover {
background: #90939980;
Expand Down
42 changes: 26 additions & 16 deletions scrapydweb/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,18 +61,18 @@
<div class="dropdown-content-wrap">
<div class="dropdown-content">
{% for SCRAPYD_SERVER in SCRAPYD_SERVERS %}
{% if SCRAPYD_SERVERS_GROUPS[loop.index-1] and loop.changed(SCRAPYD_SERVERS_GROUPS[loop.index-1]) %}
<div> --- {{ SCRAPYD_SERVERS_GROUPS[loop.index-1] }} --- </div>
{% if SCRAPYD_SERVERS_GROUPS[loop.index0] and loop.changed(SCRAPYD_SERVERS_GROUPS[loop.index0]) %}
<div> --- {{ SCRAPYD_SERVERS_GROUPS[loop.index0] }} --- </div>
{% endif %}

<a href="{{ g.url_jobs_list[loop.index-1] }}"
<a href="{{ g.url_jobs_list[loop.index0] }}"

{% if loop.index == node %}
style="color: #409EFF; font-weight: 700;"
{% endif %}

onclick="showLoader();">
{{ SCRAPYD_SERVER }}
[{{ loop.index }}] {{ SCRAPYD_SERVER }}
</a>
{% endfor %}
</div>
Expand Down Expand Up @@ -123,6 +123,7 @@

<main>
<aside>
<div>
<h3>Overview</h3>
<ul>
<li>
Expand All @@ -142,7 +143,8 @@ <h3>Overview</h3>
</a>
</li>
</ul>

</div>
<div>
<h3>Dashboard</h3>
<ul>
<li>
Expand Down Expand Up @@ -172,7 +174,8 @@ <h3>Dashboard</h3>
</li>
{% endif %}
</ul>

</div>
<div>
<h3>Operations</h3>
<ul>
<li>
Expand All @@ -192,7 +195,8 @@ <h3>Operations</h3>
</a>
</li>
</ul>

</div>
<div>
<h3>Files</h3>
<ul>
<li>
Expand Down Expand Up @@ -222,7 +226,8 @@ <h3>Files</h3>
</li>
{% endif %}
</ul>

</div>
<div>
<h3>Utilities</h3>
<ul>
<li>
Expand All @@ -242,7 +247,8 @@ <h3>Utilities</h3>
</a>
</li>
</ul>

</div>
<div>
<h3>System</h3>
<ul>
<li>
Expand Down Expand Up @@ -272,9 +278,13 @@ <h3>System</h3>
</li>
{% endif %}
</ul>

<ul id="links">
<li id="scrapydweb_version">v{{ SCRAPYDWEB_VERSION }} DEV</li>
</div>
<div class="github">
<a id="scrapydweb_version" class="request" href="https://pypi.org/project/scrapydweb/" target="_blank">v{{ SCRAPYDWEB_VERSION }} DEV</a>
<a class="github-button" href="{{ GITHUB_URL.replace('/scrapydweb', '') }}" aria-label="@my8100 on GitHub">GitHub</a>
<div>
<!-- <ul id="links"> -->
<!-- <li id="scrapydweb_version">v{{ SCRAPYDWEB_VERSION }} DEV</li> -->
<!-- <li id="pypi"> -->
<!-- <a target="_blank" href="https://pypi.org/project/scrapydweb/" > -->
<!-- <img src="https://img.shields.io/pypi/v/scrapydweb.svg" alt="https://pypi.org/project/scrapydweb/" /> -->
Expand All @@ -289,10 +299,10 @@ <h3>System</h3>
<!-- <li class="github"> -->
<!-- <a class="github-button" href="{{ GITHUB_URL.replace('scrapydweb', 'scrapyd-cluster-on-heroku') }}" aria-label="@my8100 on GitHub">scrapyd-cluster</a> -->
<!-- </li> -->
<li class="github">
<a class="github-button" href="{{ GITHUB_URL.replace('/scrapydweb', '') }}" aria-label="@my8100 on GitHub">GitHub</a>
</li>
</ul>
<!-- <li class="github"> -->
<!-- <a class="github-button" href="{{ GITHUB_URL.replace('/scrapydweb', '') }}" aria-label="@my8100 on GitHub">GitHub</a> -->
<!-- </li> -->
<!-- </ul> -->
</aside>

<div class="content-wrap">
Expand Down
8 changes: 4 additions & 4 deletions scrapydweb/templates/base_mobileui.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,13 @@
<div class="dropdown-content-wrap">
<div class="dropdown-content">
{% for SCRAPYD_SERVER in SCRAPYD_SERVERS %}
{% if SCRAPYD_SERVERS_GROUPS[loop.index-1] and loop.changed(SCRAPYD_SERVERS_GROUPS[loop.index-1]) %}
<div> --- {{ SCRAPYD_SERVERS_GROUPS[loop.index-1] }} --- </div>
{% if SCRAPYD_SERVERS_GROUPS[loop.index0] and loop.changed(SCRAPYD_SERVERS_GROUPS[loop.index0]) %}
<div> --- {{ SCRAPYD_SERVERS_GROUPS[loop.index0] }} --- </div>
{% endif %}

<a {% if loop.index == node %}style="color: #409EFF; font-weight: 700;"{% endif %}
href="javascript:;" onclick="forceLoader('{{ g.url_jobs_list[loop.index-1] }}');">
{{ SCRAPYD_SERVER }}
href="javascript:;" onclick="forceLoader('{{ g.url_jobs_list[loop.index0] }}');">
[{{ loop.index }}] {{ SCRAPYD_SERVER }}
</a>
{% endfor %}
</div>
Expand Down
6 changes: 3 additions & 3 deletions scrapydweb/templates/scrapydweb/include_multinodes_checkboxes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,13 @@
<label for="checkAll"><input type="checkbox" id="checkAll" />CheckAll / UncheckAll</label>
<div id="nodes_checkboxes">
{% for SCRAPYD_SERVER in SCRAPYD_SERVERS %}
{% if SCRAPYD_SERVERS_GROUPS[loop.index-1] and loop.changed(SCRAPYD_SERVERS_GROUPS[loop.index-1]) %}
<span> --- {{ SCRAPYD_SERVERS_GROUPS[loop.index-1] }} --- </span>
{% if SCRAPYD_SERVERS_GROUPS[loop.index0] and loop.changed(SCRAPYD_SERVERS_GROUPS[loop.index0]) %}
<span> --- {{ SCRAPYD_SERVERS_GROUPS[loop.index0] }} --- </span>
{% endif %}

<label id="label_{{ loop.index }}" for="checkbox_{{ loop.index }}" {% if loop.index == node %}style="color: #409EFF; font-weight: 700;"{% endif %}>
<input type="checkbox" id="checkbox_{{ loop.index }}" name="{{ loop.index }}"
{% if loop.index in selected_nodes %}checked{% endif %} />{{ SCRAPYD_SERVER }}
{% if loop.index in selected_nodes %}checked{% endif %} />[{{ loop.index }}] {{ SCRAPYD_SERVER }}
</label>
{% endfor %}
</div>
Expand Down
8 changes: 4 additions & 4 deletions scrapydweb/templates/scrapydweb/items.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ <h2>

<div id="app">
<template>
<el-col :span="4">
<el-col :span="5">
<el-button-group>
<el-button type="primary" onclick="window.history.back();" icon="el-icon-arrow-left" size="medium">Back</el-button>
<el-button type="primary" onclick="window.history.forward();" size="medium">Forward<i class="el-icon-arrow-right el-icon--right"></i></el-button>
Expand All @@ -31,7 +31,7 @@ <h2>
{% if project and spider and rows %}
<el-button-group>
{% if SCRAPYD_SERVERS_AMOUNT > 1 %}
<el-button type="success" onclick="window.location='{{ url_multinode_run }}';" size="medium">multinode</el-button>
<el-button type="success" onclick="window.location='{{ url_multinode_run }}';" size="small">{{ g.multinode|safe }}</el-button>
{% endif %}
<el-button type="success" onclick="window.location='{{ url_schedule }}';" size="medium">Run Spider ({{ spider }})</el-button>
</el-button-group>
Expand All @@ -54,10 +54,10 @@ <h2>
<el-table-column prop="size" label="Size" sortable align="center" width="100" :sort-method="sortSize" :sort-orders=['descending','ascending',null]></el-table-column>

{% if project and spider %}
<el-table-column prop="stats" label="Stats" sortable align="center" width="{% if SCRAPYD_SERVERS_AMOUNT > 1 %}160{% else %}80{% endif %}">
<el-table-column prop="stats" label="Stats" sortable align="center" width="{% if SCRAPYD_SERVERS_AMOUNT > 1 %}120{% else %}80{% endif %}">
<template slot-scope="scope">
{% if SCRAPYD_SERVERS_AMOUNT > 1 %}
<a class="state multinode" :href="scope.row.url_clusterreports" target="_blank">multinode</a>
<a class="state multinode" :href="scope.row.url_clusterreports" target="_blank">{{ g.multinode|safe }}</a>
{% endif %}
<a class="state normal" :href="scope.row.url_stats" target="_blank">Stats</a>
</template>
Expand Down
12 changes: 6 additions & 6 deletions scrapydweb/templates/scrapydweb/jobs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
{% endif %}

<h2>
<a class="link" target="_blank" href="{{ url }}">Get the list of pending, running and finished jobs of all projects in database.</a>
<a class="link" target="_blank" href="{{ url }}">Get the list of jobs of all projects in database.</a>
<label title="switch to non-database view">
<a class="button normal" href="{{ url_jobs_classic }}">Classic</a>
</label>
Expand Down Expand Up @@ -83,20 +83,20 @@ <h3 id="logparser_alert" style="color: red; display: none;"></h3>
<template slot-scope="scope"><span :class="scope.row.items_class">{{scope.row.items}}</span></template>
</el-table-column>

<el-table-column prop="stats" label="Stats" sortable align="center" width="{% if SCRAPYD_SERVERS_AMOUNT > 1 %}160{% else %}80{% endif %}" :sort-method="sortByIndex">
<el-table-column prop="stats" label="Stats" sortable align="center" width="{% if SCRAPYD_SERVERS_AMOUNT > 1 %}120{% else %}80{% endif %}" :sort-method="sortByIndex">
<template slot-scope="scope">
{% if SCRAPYD_SERVERS_AMOUNT > 1 %}
<a class="state multinode" :style="{ display: scope.row.pending_display }" :href="scope.row.url_clusterreports">multinode</a>
<a class="state multinode" :style="{ display: scope.row.pending_display }" :href="scope.row.url_clusterreports">{{ g.multinode|safe }}</a>
{% endif %}
<a :class="scope.row.stats_class" :style="{ display: scope.row.pending_display }" :href="scope.row.url_stats" target="_blank">Stats</a>
</template>
</el-table-column>

<el-table-column prop="action" label="Action" sortable align="center" width="{% if SCRAPYD_SERVERS_AMOUNT > 1 %}170{% else %}150{% endif %}" :sort-method="sortByIndex">
<el-table-column prop="action" label="Action" sortable align="center" width="{% if SCRAPYD_SERVERS_AMOUNT > 1 %}120{% else %}150{% endif %}" :sort-method="sortByIndex">
<template slot-scope="scope">
<span style="color: red;" :style="{ display: scope.row.display_kill }">Kill {{scope.row.pid}} manually</span>
<span style="color: red;" :style="{ display: scope.row.display_kill }">Kill {{scope.row.pid}}</span>
{% if SCRAPYD_SERVERS_AMOUNT > 1 %}
<a class="state multinode" :style="{ display: scope.row.display_action }" :href="scope.row.url_multinode">multinode</a>
<a class="state multinode" :style="{ display: scope.row.display_action }" :href="scope.row.url_multinode">{{ g.multinode|safe }}</a>
{% endif %}
<a :class="scope.row.action_class" :style="{ display: scope.row.display_action }" @click="handleActionClick(scope.row.url_action)">{{scope.row.action}}</a>
</template>
Expand Down
Loading

0 comments on commit 6033e7e

Please sign in to comment.