Skip to content

Commit 360b73c

Browse files
janzhengjanzheng
committed
capsid updates for infographic issue
1 parent 14351f3 commit 360b73c

30 files changed

+8274
-8407
lines changed

‎.babelrc

-18
This file was deleted.

‎.eslintignore

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
assets/*
2+
static/*
3+
nuxt.config.js
4+
other/*
5+
6+
7+
8+
9+
10+
# from .gitignore
11+
12+
# Created by .ignore support plugin (hsz.mobi)
13+
### Node template
14+
# Logs
15+
logs
16+
*.log
17+
npm-debug.log*
18+
yarn-debug.log*
19+
yarn-error.log*
20+
21+
# Runtime data
22+
pids
23+
*.pid
24+
*.seed
25+
*.pid.lock
26+
27+
# Directory for instrumented libs generated by jscoverage/JSCover
28+
lib-cov
29+
30+
# Coverage directory used by tools like istanbul
31+
coverage
32+
33+
# nyc test coverage
34+
.nyc_output
35+
36+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
37+
.grunt
38+
39+
# Bower dependency directory (https://bower.io/)
40+
bower_components
41+
42+
# node-waf configuration
43+
.lock-wscript
44+
45+
# Compiled binary addons (https://nodejs.org/api/addons.html)
46+
build/Release
47+
48+
# Dependency directories
49+
node_modules/
50+
jspm_packages/
51+
52+
# TypeScript v1 declaration files
53+
typings/
54+
55+
# Optional npm cache directory
56+
.npm
57+
58+
# Optional eslint cache
59+
.eslintcache
60+
61+
# Optional REPL history
62+
.node_repl_history
63+
64+
# Output of 'npm pack'
65+
*.tgz
66+
67+
# Yarn Integrity file
68+
.yarn-integrity
69+
70+
# dotenv environment variables file
71+
.env
72+
73+
# parcel-bundler cache (https://parceljs.org/)
74+
.cache
75+
76+
# next.js build output
77+
.next
78+
79+
# nuxt.js build output
80+
.nuxt
81+
82+
# Nuxt generate
83+
dist
84+
85+
# vuepress build output
86+
.vuepress/dist
87+
88+
# Serverless directories
89+
.serverless
90+
91+
# IDE
92+
.idea

‎.eslintrc.js

+21-21
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
module.exports = {
2-
root: true,
3-
env: {
4-
browser: true,
5-
node: true
6-
},
7-
parserOptions: {
8-
parser: 'babel-eslint'
9-
},
10-
extends: [
11-
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
12-
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
13-
'plugin:vue/essential'
14-
],
15-
// required to lint *.vue files
16-
plugins: [
17-
'vue'
18-
],
19-
// add your custom rules here
20-
rules: {}
21-
}
1+
// module.exports = {
2+
// root: true,
3+
// env: {
4+
// browser: true,
5+
// node: true
6+
// },
7+
// parserOptions: {
8+
// parser: 'babel-eslint'
9+
// },
10+
// extends: [
11+
// // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
12+
// // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
13+
// 'plugin:vue/essential'
14+
// ],
15+
// // required to lint *.vue files
16+
// plugins: [
17+
// 'vue'
18+
// ],
19+
// // add your custom rules here
20+
// rules: {}
21+
// }

‎.eslintrc.json

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es6": true
5+
},
6+
"extends": "eslint:recommended",
7+
"parserOptions": {
8+
"ecmaVersion": 2018,
9+
"sourceType": "module"
10+
},
11+
"rules": {
12+
"indent": [
13+
"warn",
14+
2
15+
],
16+
"linebreak-style": [
17+
"error",
18+
"unix"
19+
],
20+
"quotes": [
21+
"warn",
22+
"single"
23+
],
24+
"semi": [
25+
"error",
26+
"never"
27+
],
28+
"no-console": 0,
29+
"no-unused-vars": 1,
30+
"no-undef": 1
31+
}
32+
}
33+

‎assets/css/components/_blog.scss

+33-10
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@
9898
margin-top: $size-base;
9999
margin-bottom: $size-4;
100100

101+
101102
// border: $border-thin solid $color-tertiary;
102103
border-radius: $radius;
103104

@@ -211,19 +212,28 @@
211212

212213
.Periodical-updates {
213214
@extend .Periodical-card;
214-
215215
}
216216

217-
.Periodical-updates-title {
218-
display: inline-block;
219-
&:after {
220-
content: ' ';
221-
display: block;
222-
width: 40%;
223-
padding-top: $size-half;
224-
border-bottom: $border-thin $color-pink solid;
217+
.Periodical-updates-title {
218+
display: inline-block;
219+
&:after {
220+
content: ' ';
221+
display: block;
222+
width: 40%;
223+
padding-top: $size-half;
224+
border-bottom: $border-thin $color-pink solid;
225+
}
225226
}
226-
}
227+
228+
229+
.Jobs-updates {
230+
@extend .Periodical-card;
231+
background-color: $color-teal-10;
232+
}
233+
.Jobs-updates-title {
234+
@extend .Periodical-updates-title;
235+
}
236+
227237

228238
// used to display short headlines on Capsid & Tail
229239
.PeriodicalStub {
@@ -238,6 +248,19 @@
238248
text-decoration: underline;
239249
text-decoration-color: $color-links;
240250
}
251+
// emulate a link, but handled in js
252+
// since might contain nested links
253+
border: $border-thin solid $color-bg;
254+
@extend %ease;
255+
cursor: pointer;
256+
&:hover {
257+
@extend %ease;
258+
border: $border-thin solid $color-tertiary;
259+
h2 {
260+
color: $color-tertiary;
261+
@extend %ease;
262+
}
263+
};
241264
}
242265
}
243266

‎assets/css/settings.scss

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ $z-top: 90;
3636
$color-phdir: #71EFF5;
3737
$color-teal: $color-phdir;
3838
$color-teal-50: rgba($color-phdir,0.5);
39+
$color-teal-10: rgba($color-phdir,0.1);
3940
$color-dull: #90D9DD;
4041

4142
$color-yellow: #FCCB4C;

‎components/EmailPeriodical.vue

+63-7
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,22 @@
1616
<span style="font-size:12px"><a :href="`http://phage.directory/capsid/${issue.fields['Slug']}`" target="_blank">Read on Phage Directory</a></span>
1717
</div>
1818

19+
<br />
20+
1921
<div class="Email" style="box-shadow: 0px 4px 8px rgba(70, 70, 70, .1); color: #333333; background-color: #FCFCFC; border-radius: 4px; padding: 30px; margin-bottom: 15px;">
2022

2123
<div class="Periodical-description _margin-bottom-2" v-html="$md.render(issue.fields['Markdown'] || '')"></div>
2224

2325
<br />
2426

2527
<!-- twitter share on top -->
26-
<div class="Periodical-share" v-if="issue.fields['TwitterText']">
28+
<div class="Periodical-share _margin-bottom-2" v-if="issue.fields['TwitterText']">
2729
<p class="Periodical-twitter">
28-
<img src="https://abs.twimg.com/errors/[email protected]" width="23px" height="19px" >&nbsp;
29-
<a :href="`https://twitter.com/intent/tweet?text=${issue.fields['TwitterText']}`" >Tweet this issue!</a>
30+
<img src="https://abs.twimg.com/errors/[email protected]" width="23px" height="19px" >
31+
<a :href="getTwitterLink(issue)" >Tweet this issue!</a>
3032
</p>
3133
</div>
34+
3235
</div>
3336

3437
<br/><br/>
@@ -43,24 +46,40 @@
4346
</div><br/>
4447
</div>
4548
<br/>
46-
<hr style="border-color: #fa5486; border-width: 2px; border-style: solid" />
49+
50+
<div class="Jobs-updates" v-if="getJobs(issue).length>0" style="box-shadow: 0px 4px 8px rgba(70, 70, 70, .1); color: #333333; background-color: #EEFAFB; border-radius: 4px; padding: 30px; margin-bottom: 15px;">
51+
<h3 class="Jobs-updates-title_">{{issue.fields['JobsTitle'] || 'Job Board'}}<br/>
52+
<span style="color:#fa5486">&mdash;</span></h3>
53+
54+
<div class="Jobs-update-item _margin-bottom" v-for="update of getJobs(issue)" :key="update.fields['Name']" v-if="update && update.fields['isPublished']">
55+
<div class="_md-p_fix" v-html="$md.render(update.fields['Markdown'] || '')"></div>
56+
<div class="_margin-top-half" v-if="update.fields['Tags']">
57+
<span v-for="tag of update.fields.Tags" :key="tag"><span style="background-color:#eeeeee; border-radius:4px; border:1px solid #eeeeee; color:#000000; display:inline-block; font-size:12px; outline:none!important; padding:1px 8px; text-decoration:none" :class="tag == 'Sponsor' ? '--sponsor' : ''" >{{ tag }}</span>&nbsp;</span>
58+
</div>
59+
</div>
60+
</div>
61+
62+
4763
</div>
4864

4965
<br/><br/>
5066

67+
<br/><br/>
68+
5169
<div class="Periodical-content" v-if="issue.fields['ArticleContent']" style="box-shadow: 0px 4px 8px rgba(70, 70, 70, .1); color: #333333; background-color: #FCFCFC; border-radius: 4px; padding: 30px; margin-bottom: 15px;">
5270
<div v-html="$md.render(issue.fields['ArticleContent'] || '')" >
5371
</div>
5472

5573
<br/><br/>
5674

5775
<!-- twitter share on bottom -->
58-
<div class="Periodical-share" v-if="issue.fields['TwitterText']">
76+
<div class="Periodical-share _margin-bottom-2" v-if="issue.fields['TwitterText']">
5977
<p class="Periodical-twitter">
60-
<img src="https://abs.twimg.com/errors/[email protected]" width="23px" height="19px" >&nbsp;
61-
<a :href="`https://twitter.com/intent/tweet?text=${issue.fields['TwitterText']}`" >Tweet this issue!</a>
78+
<img src="https://abs.twimg.com/errors/[email protected]" width="23px" height="19px" >
79+
<a :href="getTwitterLink(issue)" >Tweet this issue!</a>
6280
</p>
6381
</div>
82+
6483
</div>
6584

6685

@@ -109,6 +128,43 @@ export default {
109128
// console.log('get updates:', updates)
110129
return updates || undefined
111130
},
131+
132+
getJobs(issue) {
133+
// jobs also pull from Updates tab
134+
const jobs = this.$cytosis.getLinkedRecords(issue.fields['Jobs'], this['Updates'], true)
135+
// console.log('get updates:', updates)
136+
return jobs || undefined
137+
},
138+
139+
getTwitterLink(issue) {
140+
/*
141+
https://www.thesocialmediahat.com/article/how-attach-images-tweet-buttons
142+
143+
https://stackoverflow.com/questions/9127808/how-do-you-include-hashtags-within-fitter-share-link-text
144+
145+
https://twitter.com/intent/tweet?
146+
url=<url to tweet>
147+
text=<text to tweet>
148+
hashtags=<comma separated list of hashtags, with no # on them>
149+
150+
https://twitter.com/intent/tweet?url=http://www.example.com&text=I+am+eating+branston+pickel+right+now&hashtags=bransonpickel,pickles
151+
152+
Image example
153+
- must already have shared on twitter somewhere
154+
https://twitter.com/intent/tweet?&text=Phage+Therapy+Crowdsourcing+Infographic+by+@phagedirectory+pic.twitter.com/JMJfiertE1&hashtags=phagetherapy,phage,crowdsourcing,phagedirectory
155+
*/
156+
157+
// issue.fields['TwitterText']
158+
159+
// generated from janistanian
160+
// https://pbs.twimg.com/media/DtRXxsOUwAAo-Iz.jpg:large
161+
const text = issue.fields['TwitterText']
162+
const url = issue.fields['TwitterURL']
163+
const tags = issue.fields['TwitterTags']
164+
165+
return `https://twitter.com/intent/tweet?url=${url}&text=${text}&hashtags=${tags}`
166+
167+
}
112168
}
113169

114170
}

‎components/Form.vue

-1
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,6 @@ export default {
104104
}
105105
}
106106
107-
108107
this.sending = true
109108
110109
// console.log('Submitting test data: ', data)

0 commit comments

Comments
 (0)